We can begin from the project we did in Chapter 1, Refreshing the UI Automatically with KnockoutJS. First of all, we are going to add some style to the page. Add a file called style.css
into the css
folder. Add a reference in the index.html
file, just below the bootstrap
reference. The following is the content of the file:
.container-fluid { margin-top: 20px; } .row { margin-bottom: 20px; } .cart-unit { width: 80px; } .btn-xs { font-size:8px; } .list-group-item { overflow: hidden; } .list-group-item h4 { float:left; width: 100px; } .list-group-item .input-group-addon { padding: 0; } .btn-group-vertical > .btn-default { border-color: transparent; } .form-control[disabled], .form-control[readonly] { background-color: transparent !important; }
Now remove all the content from the body tag except for the script tags and paste in these lines:
<div class="container-fluid"> <div class="row" id="catalogContainer"> <div class="col-xs-12...