introduction to twitter's bootstrap 2
DESCRIPTION
Presentation I made @eBay Shanghai. 1. Bootstrap Features 2. Why using Bootstrap 3. Built with BootstrapTRANSCRIPT
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