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. These  opinions  and  thoughts  are  my  own,  and  may  or

      may  not  reflect  the  opinions  of  my  employer.   Disclaimer  
  2. 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.    
  3. 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)  
  4. 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!
  5. 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.
  6. 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