Tweet
Tweet

Slide 1

Slide 1 text

Bootstrap 2 Open Source Summit January 31, 2012

Slide 2

Slide 2 text

@mdo

Slide 3

Slide 3 text

Lets talk

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

History lesson

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

What’s new?

Slide 11

Slide 11 text

Docs

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Responsive

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

// 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) { ... }

Slide 16

Slide 16 text

CSS Smarter defaults, better classes.

Slide 17

Slide 17 text

Label Check me out Submit

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

What else?

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

@fat

Slide 22

Slide 22 text

(O_O ) The vision

Slide 23

Slide 23 text

data-*

Slide 24

Slide 24 text

// 1.x closing modal/alerts ×

Slide 25

Slide 25 text

// Example dismiss ×

Slide 26

Slide 26 text

// href = target Launch // data-target = target Launch

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

js API Same stuff, but better.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

$.fn.popover.Constructor

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

12 plugins Collapse · Carousel · Typeahead

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Customize

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Le future Internationalization Improving responsiveness More new features Bug fixes

Slide 43

Slide 43 text

Community

Slide 44

Slide 44 text

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