Tweet
Tweet

Slide 1

Slide 1 text

BOOTSTRAP

Slide 2

Slide 2 text

HTML, CSS, and JS TOOLKIT from Twitter

Slide 3

Slide 3 text

Customize and extend via LESS

Slide 4

Slide 4 text

Alternatives

Slide 5

Slide 5 text

Foundation

Slide 6

Slide 6 text

Blueprint

Slide 7

Slide 7 text

Why Bootstrap? Save time; Focus on logic & code Excellent documentation

Slide 8

Slide 8 text

Who is using?

Slide 9

Slide 9 text

JomSocial

Slide 10

Slide 10 text

kdnp.me

Slide 11

Slide 11 text

Twitter

Slide 12

Slide 12 text

Scaffolding Base CSS Components Javascripts What Bootstrap provides?

Slide 13

Slide 13 text

Markup CSS Reset Grid Layout Responsive Layout Visibility Scaffolding

Slide 14

Slide 14 text

Typography Table Form Button Icon Base CSS

Slide 15

Slide 15 text

Button - Group, Dropdown Thumbnail & Images Label & Badge Navigation - Tabs, Pills, Nav, Nav List Alerts Progress Bar Components

Slide 16

Slide 16 text

Modal Popup Dropdown Scrollspy Tab Tooltip & Popover Alert Button Collapse Carousel Typeahead Javascripts

Slide 17

Slide 17 text

12 columns 60px column width 20px column gutter 940px wrapper width Customizable via LESS .container .row .span[1..12] Grid

Slide 18

Slide 18 text

Responsive Layout width < 480px - fluid column width 480px < width < 767px - fluid column width 767px < width < 980px - 42px column width width > 980px - 60px column width width > 1200px - 70px column width

Slide 19

Slide 19 text

Responsive Layout .container-fluid instead of .container require bootstrap-responsive.css

Slide 20

Slide 20 text

Visibility Hide and show elements on Desktop .visible-desktop, .hidden-desktop Tablet .visible-tablet, .hidden-tablet Phone .visible-phone, .hidden-phone

Slide 21

Slide 21 text

...
Your Header here
A nested content here
Another nested content
Your sidebar here
Footer here ...