$30 off During Our Annual Pro Sale. View Details »

Bootstrap 2

Mark Otto
February 01, 2012

Bootstrap 2

Presented by @fat and @mdo at Twitter's January 31st Open Source Summit.

Topics included a brief history lesson on Bootstrap, what's new on the HTML and CSS front (@mdo), what's new in the Javascript (@fat), the new Customize page, and how awesome the Bootstrap community has been.

Mark Otto

February 01, 2012
Tweet

More Decks by Mark Otto

Other Decks in Programming

Transcript

  1. Bootstrap 2
    Open Source Summit
    January 31, 2012

    View Slide

  2. @mdo

    View Slide

  3. Lets talk

    View Slide

  4. Boot·strap |ˈboōtˌstrap|
    noun
    1. simple and flexible HTML, CSS, and
    Javascript for popular user interface
    components and interactions.

    View Slide

  5. Numbers
    16,300+
    watchers
    3,000+
    forks
    1,400+
    closed issues
    852
    commits to v2

    View Slide

  6. History lesson

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. What’s new?

    View Slide

  11. Docs

    View Slide

  12. View Slide

  13. Responsive

    View Slide

  14. View Slide

  15. // Small devices
    @media (max-width: 480px) { ... }
    // Tablets (Portrait)
    @media (max-width: 768px) { ... }
    // Tablets (Landscape)
    @media (min-width: 768px) and
    (max-width: 980px) { ... }
    // Desktop small & tablets
    @media (max-width: 980px) { ... }
    // Desktop large
    @media (max-width: 1200px) { ... }

    View Slide

  16. CSS
    Smarter defaults, better classes.

    View Slide


  17. Label


    Check me out

    Submit

    View Slide

  18. // Tables
    .table { ... }
    .table-striped { ... }
    .table-bordered { ... }
    .table-condensed { ... }
    // Forms
    .form-inline { ... }
    .form-search { ... }
    .form-horizontal { ... }
    // Nav
    .nav { ... }
    .nav-tabs { ... }
    .nav-pills { ... }

    View Slide

  19. What else?

    View Slide

  20. Scaffolding
    Fluid grid system
    Inline and search forms
    Base CSS
    Improved buttons support
    Icons, by Glyphicons
    Components
    Button groups and toolbars
    Dropdown buttons
    Dropdowns in pills
    Stacked tabs and pills
    Overhauled thumbnails
    New alert styles
    Progress bars

    View Slide

  21. @fat

    View Slide

  22. (O_O )
    The vision

    View Slide

  23. data-*

    View Slide

  24. // 1.x closing modal/alerts

    ×

    View Slide

  25. // Example dismiss

    ×

    View Slide

  26. // href = target

    Launch

    // data-target = target

    Launch

    View Slide

  27. // Example options in markup
    data-keyboard=”false” data-backdrop=”static”

    View Slide

  28. // Turn off all data-api
    $(‘body’).off(‘.data-api’)
    // Turn off alert data-api
    $(‘body’).off(‘.alert.data-api’)

    View Slide

  29. js API
    Same stuff, but better.

    View Slide

  30. $.fn.modal.defaults = { ... }

    View Slide

  31. $.fn.popover.Constructor

    View Slide

  32. $(‘[rel=popover]’).data(‘popover’)

    View Slide

  33. 12 plugins
    Collapse · Carousel · Typeahead

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. Customize

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. Le future
    Internationalization
    Improving responsiveness
    More new features
    Bug fixes

    View Slide

  43. Community

    View Slide

  44. twitter.github.com/bootstrap
    Find us online:
    twitter.com/mdo
    twitter.com/fat
    twitter.com/TwBootstrap
    github.com/twitter/bootstrap
    Thanks!

    View Slide