Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to Twitter's Bootstrap 2

18,429 views

Published on

Presentation I made @eBay Shanghai.
1. Bootstrap Features
2. Why using Bootstrap
3. Built with Bootstrap

Published in: Technology

Introduction to Twitter's Bootstrap 2

  1. 1. Introduction to Twitter’sBootstrap by @julienrenaux @eBay
  2. 2. 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
  3. 3. What is Bootstrap? Creators Figures (November 2012)  39,912 star  9,808 fork  5,571 closed issues
  4. 4. Bootstrap Features: Grid System 960 Grid System http://960.gs/ Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem.com/
  5. 5. Bootstrap Features: Grid System Examples
  6. 6. Bootstrap Features: Components (CSS) Buttons: Tabs: Breadcrumb: Pagination: Alerts: Progress bar:
  7. 7. Bootstrap Features: JavaScript
  8. 8. Bootstrap Features: Customization CSS Components
  9. 9. Bootstrap Features: Customization JavaScript (JQuery) JavaScript (Mootools) http://anutron.github.com/mootools-bootstrap
  10. 10. Bootstrap Features: Customization CSS variables (Less)  http://lesscss.org
  11. 11. Bootstrap Features: Customization
  12. 12. Bootstrap Features: Customization
  13. 13. Bootstrap Features: Customization
  14. 14. Why using Bootstrap?: Great Features Grid System Dozens of CSS components JavaScript plugins Web-based Customizer
  15. 15. Why using Bootstrap?: Live mockups
  16. 16. Why using Bootstrap?: Live mockups
  17. 17. Why using Bootstrap?: Live mockups
  18. 18. 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)
  19. 19. Why using Bootstrap?: Responsive Design What is it?
  20. 20. Why using Bootstrap?: Responsive Design Multi platform support (Mobile phones, Tablets, laptops large screens) 100% CSS (using Media Types: @media)
  21. 21. Why using Bootstrap?: Summary Great Features Responsive Design Live mockups Big community
  22. 22. Built with Bootstrap: Joomla 3.0
  23. 23. Built with Bootstrap: Viadeo
  24. 24. Built with Bootstrap: SlideShare http://www.slideshare.net/julienrenaux
  25. 25. ThanksQuestions? Bootstrap repository: http://github.com/twitter/bootstrap Bootstrap showcase: http://twitter.github.com/bootstrap

×