Your SlideShare is downloading. ×
Twitter Bootstrap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Twitter Bootstrap

631
views

Published on

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

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
631
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
68
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 1. Manish SinghTwitter Bootstrap
    • 2. Introduction What is Twitter-Bootstrap? Why we use it? How to use it? Conclusion
    • 3. State of Today’s WebSource: http://bradfrostweb.com/
    • 4. Whathttp://twitter.github.com/bootstrap/
    • 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. Created By
    • 7. WhyReason #1: Rich Features
    • 8. WhyReason #2: Popularity
    • 9. Also IE7+ and OperaWhyReason #3: Browser Support
    • 10. WhyReason #4: Glyph Icon Set
    • 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.  Buttons: Tabs: Breadcrumb: Pagination: Alerts: Progress bar:WhyReason #6: Components
    • 13. WhyReason #7: JavaScript/jQuery
    • 14. WhyReason #8: Customization
    • 15. WhyReason #9: Live Mock-Ups
    • 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. Examples : Grid SysytemHow
    • 18. Resourceshttp://bootswatch.com/
    • 19. Conclusion Save Time Customizable The Grid Speaks JavaScript Responsiveness The Docs Talk! Competitiveness Integration
    • 20. Thanks!Questions? Bootstrap repository: http://github.com/twitter/bootstrap Bootstrap showcase: http://twitter.github.com/bootstrap