This is the full listing of markup for the UI we designed and built in Chapter 9, Design Great UIs with Bootstrap’s Grid and Components. It’s included for completeness, but you may find it much easier to work with the source code, which you can download from the book’s website.[107]
| | <section class="customer-details" *ngIf="customer"> |
| | <form> |
| | <div class="row"> |
| | <div class="col-md-6"> |
| | <article class="panel panel-primary"> |
| | <header class="panel-heading"> |
| | <h1 class="h3"> |
| | Customer |
| | </h1> |
| | </header> |
| | <section class="panel-body"> |
| | <div class="row"> |
| | <div class="col-md-4"> |
| | <div class="form-group"> |
| | <label class="sr-only" for="first-name"> |
| | First Name |
| | </label> |
| | <input type="text" class="form-control" |
| | name="first-name" value="Pat"> |
| | </div> |
| | </div> |
| | <div class="col-md-4"> |
| | <div class="form-group"> |
| | <label class="sr-only" for="last-name">Last Name</label> |
| | <input type="text" class="form-control" |
| | name="last-name" value="Jones"> |
| | </div> |
| | </div> |
| | <div class="col-md-4"> |
| | <div class="form-group"> |
| | <label class="sr-only" for="username">Username</label> |
| | <div class="input-group"> |
| | <div class="input-group-addon">@</div> |
| | <input type="text" class="form-control" |
| | name="username" value="pat123"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="form-group"> |
| | <label class="sr-only" for="email">Email</label> |
| | <input type="text" class="form-control" |
| | name="email" value="pattyj@somewhere.net"> |
| | </div> |
| | </section> |
| | <footer class="panel-footer"> |
| | <label for="joined">Joined</label> 12/13/2014 |
| | </footer> |
| | </article> |
| | <article class="panel panel-default"> |
| | <header class="panel-heading"> |
| | <h2 class="h4"> |
| | Shipping Address |
| | </h2> |
| | </header> |
| | <section class="panel-body"> |
| | <div class="form-group"> |
| | <label class="sr-only" for="street-address"> |
| | Street Address |
| | </label> |
| | <input type="text" class="form-control" |
| | name="street-address" value="123 Any St"> |
| | </div> |
| | <div class="row"> |
| | <div class="col-md-6"> |
| | <div class="form-group"> |
| | <label class="sr-only" for="city">City</label> |
| | <input type="text" class="form-control" |
| | name="city" value="Washington"> |
| | </div> |
| | </div> |
| | <div class="col-md-2"> |
| | <div class="form-group"> |
| | <label class="sr-only" for="state">State</label> |
| | <input type="text" class="form-control" |
| | name="state" value="DC"> |
| | </div> |
| | </div> |
| | <div class="col-md-4"> |
| | <div class="form-group"> |
| | <label class="sr-only" for="zip">Zip</label> |
| | <input type="text" class="form-control" |
| | name="zip" value="20001"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | </article> |
| | </div> |
| | <div class="col-md-6"> |
| | <article class="panel panel-default"> |
| | <header class="panel-heading"> |
| | <h2 class="h4"> |
| | Billing Info |
| | </h2> |
| | </header> |
| | <section class="panel-body"> |
| | <article> |
| | <div class="row"> |
| | <div class="col-md-7"> |
| | <p class="h4"> |
| | ****-****-****-1234 |
| | <span class="label label-success">VISA</span> |
| | </p> |
| | <p class="h5"> |
| | <label>Expires:</label> 04/19 |
| | </p> |
| | </div> |
| | <div class="col-md-5 text-right"> |
| | <button class="btn btn-lg btn-default"> |
| | View Details… |
| | </button> |
| | </div> |
| | </div> |
| | </article> |
| | <hr> |
| | <article class="well well-sm"> |
| | <header> |
| | <h1 class="h5"> |
| | Billing Address |
| | <small> |
| | <input type="checkbox"> Same as shipping? |
| | </small> |
| | </h1> |
| | </header> |
| | <div class="form-group"> |
| | <label class="sr-only" for="street-address"> |
| | Street Address |
| | </label> |
| | <input type="text" class="form-control" |
| | name="street-address" value="123 Any St"> |
| | </div> |
| | <div class="row"> |
| | <div class="col-md-6"> |
| | <div class="form-group"> |
| | <label class="sr-only" for="city">City</label> |
| | <input type="text" class="form-control" |
| | name="city" value="Washington"> |
| | </div> |
| | </div> |
| | <div class="col-md-2"> |
| | <div class="form-group"> |
| | <label class="sr-only" for="state">State</label> |
| | <input type="text" class="form-control" |
| | name="state" value="DC"> |
| | </div> |
| | </div> |
| | <div class="col-md-4"> |
| | <div class="form-group"> |
| | <label class="sr-only" for="zip">Zip</label> |
| | <input type="text" class="form-control" |
| | name="zip" value="20001"> |
| | </div> |
| | </div> |
| | </div> |
| | </article> |
| | </section> |
| | </article> |
| | </div> |
| | </div> |
| | </form> |
| | </section> |