Bootstrap Study Share

1,760 views

Published on

Bootstrap investigation.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • How IE 7 supported Bootstrap 3?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,760
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Bootstrap Study Share

  1. 1. Bootstrap v3 研究分享 by Vincent Chang
  2. 2. Agenda  Bootstrap ◦ CSS ◦ Component ◦ UI Customization  Responsive Web Design(RWD)  Less  Reference
  3. 3. BOOTSTRAP
  4. 4. Bootstrap v3  HTML5 ◦ <!DOCTYPE html>  CSS ◦ CSS3 ◦ Grid System ◦ Normalize.css, a project by Nicolas Gailagher and Jonathan Neal ◦ LESS  Components ◦ A dozen reusable components ◦ Glyphicons  JavaScript ◦ Uses jQuery framework ◦ The data attribute
  5. 5. Bootstrap Grid System  12 columns  Size ◦ Extra small(col-xs) : (<768px) ◦ Small(col-sm) : (≥768px) ◦ Middle(col-md) : (≥992px) ◦ Large(col-lg) : (≥1200px)  Grid behavior: ◦ Extra small : Horizontal at all times ◦ Others : Collapsed to start, horizontal above breakpoints
  6. 6. Bootstrap Grid System  Include Bootstrap.css  Usage ◦ Row : row as the div class name ◦ Column : (col-xs-/col-sm-/col-md-/col- lg-)%d as the div class name Col-md-6 Col-md-6
  7. 7. Grid system sample
  8. 8. Normalize.css  Cross-browser consistency in HTML elements margin => 0 border => 0 padding => 0
  9. 9. Bootstrap Components  Pre-define a couple of components ◦ Dropdowns ◦ Button, Button Groups ◦ Navbar ◦ Labels ◦ Progress bars ◦ Alerts ◦ Etc.  Component usage: 1. Apply style 2. Enable component logic  Via javascript.  Via markup API
  10. 10. Via javascript(Model)  Example ◦ Modal  $('#myModal').modal(‘show’)  $('#myModal').modal({backdrop:’static’, show:true}) ◦ Button  $('.btn').button() ◦ Tooltip  $('#example').tooltip(options)
  11. 11. Via markup API(Modal)
  12. 12. GlyphIcons
  13. 13. GlyphIcons  Usage : ◦ <span class="glyphicon glyphicon- star"></span> ◦ Don't mix with other components  X:<button class=“btn glyphicon glyphicon-star”>button</button>  O:<button class=“btn”><span class=“glyphicon xxx”></span>button<button>
  14. 14. Bootstrap UI Customization  All UI style sheet can be set on official website  http://bootswatch.com/  CSS part ◦ Able to be included partially.  Javascript/jQuery plugin part ◦ Able to be included partially.  Less Variables
  15. 15. RESPONSIVE WEB DESIGN Desktop, Tablet, Mobile and etc.
  16. 16. Responsive Web Design  Fluid Grid Concept  Flexible Image  Media Queries
  17. 17. Responsive, Fluid Grid Concept  Grid system ◦ Is derived from the graphic design. ◦ Make alignment. ◦ Standardize layout design. ◦ 960 Grid system  Fluid Grid ◦ Web design
  18. 18. 12 grid
  19. 19. 12 grid
  20. 20. Flexible Image  CSS ◦ max-width: 100%; height: auto;  Bootstrap way ◦ class .img-responsive
  21. 21. Media Queries  a feature of CSS3  E.g.  Bootstrap responsive utilities ◦ .visible-(xs/sm/md/lg) ◦ .hidden-(xs/sm/md/lg) ◦ .visible-print ◦ .hidden-print
  22. 22. CSS3 Media Queries Browser Support  Desktop platform : doesn’t support IE 8  Mobile platform : support all browsers.  Reference : http://caniuse.com/css- mediaqueries
  23. 23. LESS The dynamic stylesheet language
  24. 24. What is LESS  CSS extension  .LESS files compile to CSS files  Variable  Mixin  Nested Rules  Functions & Operations
  25. 25. Variables
  26. 26. Mixin
  27. 27. Nested Rules
  28. 28. Functions  String  Misc  List  Math  Type  Color  Color Definition  Color Channel  Color Operations  Color Blending  Reference : less functions
  29. 29. Function example
  30. 30. Reference  Bootstrap website : ◦ http://getbootstrap.com/ ◦ http://bootswatch.com/ ◦ http://www.layoutit.com/  LESS : http://www.lesscss.org/  RWD Wiki : http://en.wikipedia.org/wiki/Respon sive_web_design

×