Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Bootstrap

Intro to Bootstrap

An introduction to the Bootstrap web framework


Chris Griffith

April 05, 2013

More Decks by Chris Griffith

Other Decks in Technology


  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  
  3. None
  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/