Twitter Bootstrap

Post on 27-Jan-2015

623 views 2 download

Tags:

description

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

Transcript of Twitter Bootstrap

Manish Singh

Twitter Bootstrap

Introduction

What is Twitter-Bootstrap?

Why we use it?

How to use it?

Conclusion

State of Today’s Web

Source: http://bradfrostweb.com/

What

http://twitter.github.com/bootstrap/

A freely available design framework for websites and web applications

Based upon HTML5, CSS and JavaScript

Supports all major browsers (even IE7!)

Released on GitHub in August 2011

Twitter Bootstrap

Created By

WhyReason #1: Rich Features

WhyReason #2: Popularity

Also IE7+ and Opera

WhyReason #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 file from official website. Extract the bootstrap files in to your project folder and you are ready to go

2. Fork from GitHub or you can use Nuget Package

How

Examples : Grid Sysytem

How

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