Tweet
Tweet

Slide 1

Slide 1 text

h"p://twi"er.github.com/bootstrap/  

Slide 2

Slide 2 text

These  opinions  and  thoughts  are  my  own,  and  may  or   may  not  reflect  the  opinions  of  my  employer.   Disclaimer  

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Introducing Bootstrap Bootstrap  is  a  toolkit  designed  to  kickstart  development  of   web  apps  and  sites.     It  provides  an  easy-­‐to-­‐implement  960  pixel  grid  for   efficient  layout,  as  well  as  expertly  craHed  styles  for   typography,  navigaIon,  tables,  forms,  bu"ons,  and  more.    

Slide 5

Slide 5 text

Introducing Bootstrap Bootstrap  is  a  very  simple  way  to  promote  quick,  clean  and   highly  usable  applicaIons  …  providing  a  clean  and  uniform   soluIon  to  the  most  common,  everyday  interface  tasks   developers  come  across.    -­‐  @mdo  (co-­‐creator)  

Slide 6

Slide 6 text

License Apache  License,  Version  2.0  

Slide 7

Slide 7 text

Examples

Slide 8

Slide 8 text

Examples

Slide 9

Slide 9 text

Introducing Bootstrap

Slide 10

Slide 10 text

Getting Bootstrap h"p://twi"er.github.com/bootstrap/  

Slide 11

Slide 11 text

HTML Template

Slide 12

Slide 12 text

Grid System

Slide 13

Slide 13 text

Grid System

Slide 14

Slide 14 text

Fixed Layout

Slide 15

Slide 15 text

Fixed Layout

Slide 16

Slide 16 text

Responsive Design

Slide 17

Slide 17 text

Responsive Design

Slide 18

Slide 18 text

Responsive Design

Slide 19

Slide 19 text

Components

Slide 20

Slide 20 text

Components Button groups! Button dropdowns! Navigational tabs, pills, and lists! Navbar! Labels! Badges! Page headers and hero unit! Thumbnails! ! Alerts! Progress bars! Modals! Dropdowns! Tooltips! Popovers! Accordion! Carousel! Typeahead!

Slide 21

Slide 21 text

Buttons

Slide 22

Slide 22 text

Button Sizing

Slide 23

Slide 23 text

Icons by Glyphicons

Slide 24

Slide 24 text

Breadcrumbs

Slide 25

Slide 25 text

Tabs

Slide 26

Slide 26 text

Navbar

Slide 27

Slide 27 text

Alerts

Slide 28

Slide 28 text

Thumbnails

Slide 29

Slide 29 text

Thumbnails

Slide 30

Slide 30 text

Media object Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Slide 31

Slide 31 text

Media object

Slide 32

Slide 32 text

Forms

Slide 33

Slide 33 text

jQuery Plugins Transitions! Modal! Dropdown! Scrollspy! Tab! Tooltip! Popover! Alert! Button! ! ! Collapse! Carousel! Typeahead! Affix!

Slide 34

Slide 34 text

Modal

Slide 35

Slide 35 text

Dropdowns

Slide 36

Slide 36 text

Tooltips

Slide 37

Slide 37 text

Carousel

Slide 38

Slide 38 text

Carousel

Slide 39

Slide 39 text

Customize

Slide 40

Slide 40 text

LESS h"p://lesscss.org/  

Slide 41

Slide 41 text

h"p://crunchapp.net/  

Slide 42

Slide 42 text

h"p://bootsnipp.com/  

Slide 43

Slide 43 text

h"p://jetstrap.com/build  

Slide 44

Slide 44 text

Bootstrap 3.0 •  Bootstrap  3  will  be  mobile  first.   •  No  more  separate  responsive  CSS  file—all  in  one  now,  baby.   •  Dropping  support  for  IE7  and  Firefox  3.x.   •  Grids  have  been  overhauled—now  simpler  and  fluid  by  default.   •  Modals  are  all  responsive.   •  Dropping  submenu  support.   •  Carousel  has  been  redesigned.   •  Renamed  all  of  the  variables  to  use  dashes  instead  of  camelCase.   •  Dropped  image  icons  in  favor  of  icon  font.   •  JavaScript  events  are  going  to  be  namespaced.   •  Docs  are  geang  a  bit  of  a  reorganizaIon—Scaffolding  and  Base  CSS  have   been  merged  into  a  single  page,  CSS.   •  Added  a  new  gallery  page  to  showcase  more  awesome  Bootstrap   implementaIons.   •  And  a  whole  mess  of  other  changes.   h"ps://github.com/twi"er/bootstrap/pull/6342  

Slide 45

Slide 45 text

Thanks!   chris.griffi[email protected]   @chrisgriffith   h"p://chrisgriffith.wordpress.com/