Introduction To Bootstrap

Slide during JomWeb Pro at Slashes & Dots office on May 20th, 2012.

Transcript

1. BOOTSTRAP
   

   View Slide

2. HTML, CSS, and JS
   TOOLKIT from Twitter
   

   View Slide

3. Customize and extend
   via LESS
   

   View Slide

4. Alternatives
   

   View Slide

5. Foundation
   

   View Slide

6. Blueprint
   

   View Slide

7. Why Bootstrap?
   Save time; Focus on logic & code
   Excellent documentation
   

   View Slide

8. Who is using?
   

   View Slide

9. JomSocial
   

   View Slide

10. kdnp.me
    

    View Slide

11. Twitter
    

    View Slide

12. Scaffolding
    Base CSS
    Components
    Javascripts
    What Bootstrap
    provides?
    

    View Slide

13. Markup
    CSS Reset
    Grid
    Layout
    Responsive Layout
    Visibility
    Scaffolding
    

    View Slide

14. Typography
    Table
    Form
    Button
    Icon
    Base CSS
    

    View Slide

15. Button - Group,
    Dropdown
    Thumbnail & Images
    Label & Badge
    Navigation - Tabs,
    Pills, Nav, Nav List
    Alerts
    Progress Bar
    Components
    

    View Slide

16. Modal Popup
    Dropdown
    Scrollspy
    Tab
    Tooltip & Popover
    Alert
    Button
    Collapse
    Carousel
    Typeahead
    Javascripts
    

    View Slide

17. 12 columns
    60px column width
    20px column gutter
    940px wrapper width
    Customizable via LESS
    .container
    .row
    .span[1..12]
    Grid
    

    View Slide

18. Responsive Layout
    width < 480px - fluid column width
    480px < width < 767px - fluid column width
    767px < width < 980px - 42px column width
    width > 980px - 60px column width
    width > 1200px - 70px column width
    

    View Slide

19. Responsive Layout
    .container-fluid instead of .container
    require bootstrap-responsive.css
    

    View Slide

20. Visibility
    Hide and show elements on
    Desktop .visible-desktop, .hidden-desktop
    Tablet .visible-tablet, .hidden-tablet
    Phone .visible-phone, .hidden-phone
    

    View Slide

21. ...
    
    
    
    Your Header here
    
    
    
    A nested content here
    
    
    Another nested content
    
    
    
    
    Your sidebar here
    
    
    Footer here
    
    
    ...
    

    View Slide