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.

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
10. What’s new?
11. Docs
13. Responsive
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
37. Customize
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!