Manish SinghTwitter Bootstrap
Introduction What is Twitter-Bootstrap? Why we use it? How to use it? Conclusion
State of Today’s WebSource: http://bradfrostweb.com/
Whathttp://twitter.github.com/bootstrap/
 A freely available design framework forwebsites and web applications Based upon HTML5, CSS andJavaScriptSupports all m...
Created By
WhyReason #1: Rich Features
WhyReason #2: Popularity
Also IE7+ and OperaWhyReason #3: Browser Support
WhyReason #4: Glyph Icon Set
 960 Grid System http://960.gs/ Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem....
 Buttons: Tabs: Breadcrumb: Pagination: Alerts: Progress bar:WhyReason #6: Components
WhyReason #7: JavaScript/jQuery
WhyReason #8: Customization
WhyReason #9: Live Mock-Ups
1. Download Twitter Bootstrap filefrom official website. Extractthe bootstrap files in to yourproject folder and you arere...
Examples : Grid SysytemHow
Resourceshttp://bootswatch.com/
Conclusion Save Time Customizable The Grid Speaks JavaScript Responsiveness The Docs Talk! Competitiveness Integra...
Thanks!Questions? Bootstrap repository: http://github.com/twitter/bootstrap Bootstrap showcase: http://twitter.github.co...
Upcoming SlideShare
Loading in...5
×

Twitter Bootstrap

697

Published on

This session talks about twitter bootstrap, how can we use it, and what benefit we get

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
697
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
68
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Bootstrap is using a grid system base on 12 columns. What is a grid system? A grid system is a way to create a solid foundation to build your project on.If you want your web application to have a left navigation you could design your HTML using row number 3If you do not want any navigation and you want your content to be as wide as possible then you could use row number 5This grid design was popularized by 960 grid system http://960.gs and BluePrint http://www.blueprintcss.org
  • Here is a list of some of the CSS component available. There are dozens of them available with bootstrap.
  • Bootstrap gives life to its UI by using Jquery plugins.
  • Bootstrap provides a web-based customizer that allow you to generate a CSS file based on your specific needs.
  • Twitter Bootstrap

    1. 1. Manish SinghTwitter Bootstrap
    2. 2. Introduction What is Twitter-Bootstrap? Why we use it? How to use it? Conclusion
    3. 3. State of Today’s WebSource: http://bradfrostweb.com/
    4. 4. Whathttp://twitter.github.com/bootstrap/
    5. 5.  A freely available design framework forwebsites and web applications Based upon HTML5, CSS andJavaScriptSupports all major browsers (even IE7!)Released on GitHub in August 2011Twitter Bootstrap
    6. 6. Created By
    7. 7. WhyReason #1: Rich Features
    8. 8. WhyReason #2: Popularity
    9. 9. Also IE7+ and OperaWhyReason #3: Browser Support
    10. 10. WhyReason #4: Glyph Icon Set
    11. 11.  960 Grid System http://960.gs/ Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem.com/WhyReason #5: Grid System
    12. 12.  Buttons: Tabs: Breadcrumb: Pagination: Alerts: Progress bar:WhyReason #6: Components
    13. 13. WhyReason #7: JavaScript/jQuery
    14. 14. WhyReason #8: Customization
    15. 15. WhyReason #9: Live Mock-Ups
    16. 16. 1. Download Twitter Bootstrap filefrom official website. Extractthe bootstrap files in to yourproject folder and you areready to go2. Fork from GitHub or you canuse Nuget PackageHow
    17. 17. Examples : Grid SysytemHow
    18. 18. Resourceshttp://bootswatch.com/
    19. 19. Conclusion Save Time Customizable The Grid Speaks JavaScript Responsiveness The Docs Talk! Competitiveness Integration
    20. 20. Thanks!Questions? Bootstrap repository: http://github.com/twitter/bootstrap Bootstrap showcase: http://twitter.github.com/bootstrap
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×