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.

Introduction to Twitter Bootstrap 3.0.3

3,517 views

Published on

Brief introduction to Twitter Bootstrap 3.0.3

Published in: Technology, Design

Introduction to Twitter Bootstrap 3.0.3

  1. 1. Introduction to Twitter Bootstrap 3.0.3 林良軒 2013/12/24 @ NCU – RECAST Email : linliang258369@gmail.com
  2. 2. Outline Introduction to Twitter Bootstrap Scaffolding Base CSS Components Javascript Plugin 1
  3. 3. What is Bootstrap? Sleek, intuitive, and powerful mobile first frontend framework for faster and easier web development. 2
  4. 4. Categories Scaffolding  Grid System  Layout … Base CSS  Table  Form  Button … Components      Glyphicons Dropdowns Button Dropdowns Navbar Pagination … Javascript Plugin     Modal Scrollspy Button Carousel … 3
  5. 5. Scaffolding Up to 12 columns Offsetting columns <div class=“col-md-offset-3”> Responsive design – can adapt to user device Nesting columns Column ordering 4
  6. 6. Grid System 5
  7. 7. Base CSS Headings Emphasis Blackquotes 6
  8. 8. Base CSS Tables – Hover Rows, Contextual Classes, etc. Forms – Inline Form, Horizontal Form, etc. 7
  9. 9. Base CSS Buttons <button type=“button” class=“btn btn-primary btn-lg”>Primary</button> <button type=“button” class=“btn btn-success”>Success</button> <button type=“button” class=“btn btn-info btn-sm”>Info</button> <button type=“button” class=“btn btn-warning btn-xm”>Warning</button> Images <img class=“img-rounded”> <img class=“img-circle”> <img class=“img-thumbnail”> 8
  10. 10. Base CSS Responsive Utilities 9
  11. 11. Components Glyphicons <span class=“glyphicon glyphicon-star”></span> <span class=“glyphicon glyphicon-search”></span> <span class=“glyphicon glyphicon-question-sign”></span> <span class=“glyphicon glyphicon-remove”></span> Dropdowns 10
  12. 12. Components Button Dropdowns Navbars :w 11
  13. 13. Components Labels Alerts Progress bars 12
  14. 14. Compoments Lists Panels 13
  15. 15. Javascript Models(model.js) – popup message box Dropdown(dropdown.js) – for dropdown menu ScrollSpy(scrollspy.js) – automatically updating on scroll position 14
  16. 16. Javascript Tooltips(tooltip.js) – show tips when hover over Popovers(popover.js) – show tips when click Buttons(button.js) – Checkbox, Radio 15
  17. 17. Javascript Collapse(collapse.js) – collapse components Carousel(carousel.js) – slideshow 16
  18. 18. Reference http://getbootstrap.com/ https://www.youtube.com/user/meyghania/videos http://www.slideshare.net/jarannilsen/bootstraplightning-talk-16055450 17

×