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
Tweet

More Decks by Chris Griffith

Other Decks in Technology

Transcript

  1. h"p://twi"er.github.com/bootstrap/  

    View Slide

  2. These  opinions  and  thoughts  are  my  own,  and  may  or  
    may  not  reflect  the  opinions  of  my  employer.  
    Disclaimer  

    View Slide

  3. View Slide

  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.    

    View Slide

  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)  

    View Slide

  6. License
    Apache  License,  Version  2.0  

    View Slide

  7. Examples

    View Slide

  8. Examples

    View Slide

  9. Introducing Bootstrap

    View Slide

  10. Getting Bootstrap
    h"p://twi"er.github.com/bootstrap/  

    View Slide

  11. HTML Template

    View Slide

  12. Grid System

    View Slide

  13. Grid System

    View Slide

  14. Fixed Layout

    View Slide

  15. Fixed Layout

    View Slide

  16. Responsive Design

    View Slide

  17. Responsive Design

    View Slide

  18. Responsive Design

    View Slide

  19. Components

    View Slide

  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!

    View Slide

  21. Buttons

    View Slide

  22. Button Sizing

    View Slide

  23. Icons by Glyphicons

    View Slide

  24. Breadcrumbs

    View Slide

  25. Tabs

    View Slide

  26. Navbar

    View Slide

  27. Alerts

    View Slide

  28. Thumbnails

    View Slide

  29. Thumbnails

    View Slide

  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.

    View Slide

  31. Media object

    View Slide

  32. Forms

    View Slide

  33. jQuery Plugins
    Transitions!
    Modal!
    Dropdown!
    Scrollspy!
    Tab!
    Tooltip!
    Popover!
    Alert!
    Button!
    !
    !
    Collapse!
    Carousel!
    Typeahead!
    Affix!

    View Slide

  34. Modal

    View Slide

  35. Dropdowns

    View Slide

  36. Tooltips

    View Slide

  37. Carousel

    View Slide

  38. Carousel

    View Slide

  39. Customize

    View Slide

  40. LESS
    h"p://lesscss.org/  

    View Slide

  41. h"p://crunchapp.net/  

    View Slide

  42. h"p://bootsnipp.com/  

    View Slide

  43. h"p://jetstrap.com/build  

    View Slide

  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  

    View Slide

  45. Thanks!  
    chris.griffi[email protected]  
    @chrisgriffith  
    h"p://chrisgriffith.wordpress.com/  

    View Slide