Bootstrap 2

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!