Introduction to Twitter’s Bootstrap

by @julienrenaux @eBay

What is Bootstrap? UI framework (set of JavaScript, CSS, and

images) Open Source project Supports HTML5 and CSS3 Supported by all major browsers (even IE7!!!) Released in August 2011

What is Bootstrap? Creators

Figures (November 2012) 39,912 star 9,808 fork 5,571 closed issues

Bootstrap Features: Grid System

960 Grid System http://960.gs/ Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http

://goldengridsystem.com/

Bootstrap Features: Grid System Examples

Bootstrap Features: Components (CSS) Buttons:

Tabs:

Breadcrumb:

Pagination:

Alerts:

Progress bar:

Bootstrap Features: JavaScript

Bootstrap Features: Customization CSS Components

Bootstrap Features: Customization JavaScript (JQuery)

JavaScript (Mootools)http://anutron.github.com/mootools-bootstrap

Bootstrap Features: Customization CSS variables (Less)

http://lesscss.org

Bootstrap Features: Customization

Bootstrap Features: Customization

Bootstrap Features: Customization

Why using Bootstrap?: Great Features Grid System Dozens of CSS components JavaScript plugins Web-based Customizer

Why using Bootstrap?: Live mockups

Why using Bootstrap?: Live mockups

Why using Bootstrap?: Live mockups

Why using Bootstrap?: Live mockups Easy creation of proof of concept Ability to gather alpha testers feedbacks early

in the project without doing any code (Agile) HTML scaffolding ready to use by developers

(copy – past)

Why using Bootstrap?: Responsive Design What is it?

Why using Bootstrap?: Responsive Design Multi platform support (Mobile phones,

Tablets, laptops large screens) 100% CSS (using Media Types: @media)

Why using Bootstrap?: Summary Great Features Responsive Design Live mockups Big community

Built with Bootstrap: Joomla 3.0

Built with Bootstrap: Viadeo

Built with Bootstrap: SlideShare

http://www.slideshare.net/julienrenaux

Thanks

Questions?

Bootstrap repository: http://github.com/twitter/bootstrap Bootstrap showcase: http://twitter.github.com/bootstrap