Twitter Bootstrap
Upcoming SlideShare
Loading in...5
×
 

Twitter Bootstrap

on

  • 909 views

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

Statistics

Views

Total Views
909
Views on SlideShare
909
Embed Views
0

Actions

Likes
2
Downloads
67
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Twitter Bootstrap Presentation Transcript

  • 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 major browsers (even IE7!)Released on GitHub in August 2011Twitter Bootstrap
  • 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.com/WhyReason #5: Grid System
  •  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 areready to go2. Fork from GitHub or you canuse Nuget PackageHow
  • Examples : Grid SysytemHow
  • Resourceshttp://bootswatch.com/
  • Conclusion Save Time Customizable The Grid Speaks JavaScript Responsiveness The Docs Talk! Competitiveness Integration
  • Thanks!Questions? Bootstrap repository: http://github.com/twitter/bootstrap Bootstrap showcase: http://twitter.github.com/bootstrap