Twitter Bootstrap

  • 601 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
601
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
67
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