Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input group, Navbar, Pagination, Label, Badges

158 views

Published on

Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input group, Navbar, Pagination, Label, Badges

Published in: Design
  • Login to see the comments

Web Design Course - Lecture 20 - Bootstrap Dropdown, Button group, Input group, Navbar, Pagination, Label, Badges

  1. 1. WEB DESIGN
  2. 2. BOOTSTRAP DROPDOWN1 2 Button Group2 Input Group3 2 Nav4 2 Navbar5 Breadcrumbs6 2 Pagination7 Label8 4 2 Badges9
  3. 3. DROPDOWN <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data- toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
  4. 4. Button Group <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
  5. 5. Input Group <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic- addon1"> </div>
  6. 6. Nav <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul>
  7. 7. Navbar .navbar .navbar-default .navbar .navbar-inverse .navbar-fixed-top
  8. 8. Breadcrumbs <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol>
  9. 9. Pagination <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav>
  10. 10. Labels <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>
  11. 11. Badges <a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages <span class="badge">4</span> </button>
  12. 12. THANK YOU

×