Intro to Bootstrap

An introduction to the Bootstrap web framework

Transcript

1. h"p://twi"er.github.com/bootstrap/  
2. These  opinions  and  thoughts  are  my  own,  and  may  or   may  not  reflect  the  opinions  of  my  employer.   Disclaimer  
4. Introducing Bootstrap Bootstrap  is  a  toolkit  designed  to  kickstart  development  of   web  apps  and  sites.     It  provides  an  easy-­‐to-­‐implement  960  pixel  grid  for   efficient  layout,  as  well  as  expertly  craHed  styles  for   typography,  navigaIon,  tables,  forms,  bu"ons,  and  more.    
5. Introducing Bootstrap Bootstrap  is  a  very  simple  way  to  promote  quick,  clean  and   highly  usable  applicaIons  …  providing  a  clean  and  uniform   soluIon  to  the  most  common,  everyday  interface  tasks   developers  come  across.    -­‐  @mdo  (co-­‐creator)  
6. License Apache  License,  Version  2.0  
7. Examples
8. Examples
9. Introducing Bootstrap
10. Getting Bootstrap h"p://twi"er.github.com/bootstrap/  
11. HTML Template
12. Grid System
13. Grid System
14. Fixed Layout
15. Fixed Layout
16. Responsive Design
17. Responsive Design
18. Responsive Design
19. Components
20. Components Button groups! Button dropdowns! Navigational tabs, pills, and lists! Navbar! Labels! Badges! Page headers and hero unit! Thumbnails! ! Alerts! Progress bars! Modals! Dropdowns! Tooltips! Popovers! Accordion! Carousel! Typeahead!
21. Buttons
22. Button Sizing
23. Icons by Glyphicons
24. Breadcrumbs
25. Tabs
26. Navbar
27. Alerts
28. Thumbnails
29. Thumbnails
30. Media object Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
31. Media object
32. Forms
33. jQuery Plugins Transitions! Modal! Dropdown! Scrollspy! Tab! Tooltip! Popover! Alert! Button! ! ! Collapse! Carousel! Typeahead! Affix!
34. Modal
35. Dropdowns
36. Tooltips
37. Carousel
38. Carousel
39. Customize
40. LESS h"p://lesscss.org/  
41. h"p://crunchapp.net/  
42. h"p://bootsnipp.com/  
43. h"p://jetstrap.com/build  
44. Bootstrap 3.0 •  Bootstrap  3  will  be  mobile  first.   •  No  more  separate  responsive  CSS  file—all  in  one  now,  baby.   •  Dropping  support  for  IE7  and  Firefox  3.x.   •  Grids  have  been  overhauled—now  simpler  and  fluid  by  default.   •  Modals  are  all  responsive.   •  Dropping  submenu  support.   •  Carousel  has  been  redesigned.   •  Renamed  all  of  the  variables  to  use  dashes  instead  of  camelCase.   •  Dropped  image  icons  in  favor  of  icon  font.   •  JavaScript  events  are  going  to  be  namespaced.   •  Docs  are  geang  a  bit  of  a  reorganizaIon—Scaffolding  and  Base  CSS  have   been  merged  into  a  single  page,  CSS.   •  Added  a  new  gallery  page  to  showcase  more  awesome  Bootstrap   implementaIons.   •  And  a  whole  mess  of  other  changes.   h"ps://github.com/twi"er/bootstrap/pull/6342  
45. Thanks!   chris.griffith@gmail.com   @chrisgriffith   h"p://chrisgriffith.wordpress.com/