Bootstrap 2

Bc4ab438f7a4ce1c406aadc688427f2c?s=47 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.

Bc4ab438f7a4ce1c406aadc688427f2c?s=128

Mark Otto

February 01, 2012
Tweet

Transcript

  1. Bootstrap 2 Open Source Summit January 31, 2012

  2. @mdo

  3. Lets talk

  4. Boot·strap |ˈboōtˌstrap| noun 1. simple and flexible HTML, CSS, and

    Javascript for popular user interface components and interactions.
  5. Numbers 16,300+ watchers 3,000+ forks 1,400+ closed issues 852 commits

    to v2
  6. History lesson

  7. None
  8. None
  9. None
  10. What’s new?

  11. Docs

  12. None
  13. Responsive

  14. None
  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) { ... }
  16. CSS Smarter defaults, better classes.

  17. <form> <label>Label</label> <input type="text" class="span3"> <label class="checkbox"> <input type="checkbox"> Check

    me out </label> <button class="btn">Submit</button> </form>
  18. // Tables .table { ... } .table-striped { ... }

    .table-bordered { ... } .table-condensed { ... } // Forms .form-inline { ... } .form-search { ... } .form-horizontal { ... } // Nav .nav { ... } .nav-tabs { ... } .nav-pills { ... }
  19. What else?

  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
  21. @fat

  22. (O_O ) The vision

  23. data-*

  24. // 1.x closing modal/alerts <a class=”close” href=”#”> &times; </a>

  25. // Example dismiss <a class=”close” data-dismiss=”modal”> &times; </a>

  26. // href = target <a href=”#myModal” data-toggle=”modal”> Launch </a> //

    data-target = target <a data-target=”.fat” data-toggle=”modal”> Launch </a>
  27. // Example options in markup data-keyboard=”false” data-backdrop=”static”

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

    data-api $(‘body’).off(‘.alert.data-api’)
  29. js API Same stuff, but better.

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

  31. $.fn.popover.Constructor

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

  33. 12 plugins Collapse · Carousel · Typeahead

  34. None
  35. None
  36. None
  37. Customize

  38. None
  39. None
  40. None
  41. None
  42. Le future Internationalization Improving responsiveness More new features Bug fixes

  43. Community

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