twitter bootstrap tutorial

TWITTER BOOTSTRAP TUTORIAL

Twitter Bootstrap Tutorial

www.webtechschools.com

TWITTER BOOTSTRAP

Twitter bootstrap framework which makes web designing and

development quick and easy.

It composes of Html, CSS and JavaScript.

It makes project interactive and responsive.

With this we can form layouts which are responsive and easily

maintained.

Twitter Bootstrap Tutorial

www.webtechschools.com

THIS TUTORIAL CONTAINS

Definition

Advantages

Disadvantages

Futures

Versions

And Many more

Twitter Bootstrap Tutorial

www.webtechschools.com

DEFINITION OF TWIT TER B OOTSTRAP

Bootstrap is a front- end framework which makes web development

rapid and simple and contains CSS and Html based template for user

interface components. With this anyone can create responsive layouts

easily.

Twitter Bootstrap Tutorial

www.webtechschools.com

A D VA N TA G E S O F T W I T T E R B O O T S T R A P

Contains free set of tools.

Anyone can create responsive and stretchable web layouts.

You can create scroll spy and type heads without the help of

JavaScript function.

Free to download.

It saves a lot of time and efforts

Twitter Bootstrap Tutorial

www.webtechschools.com

DISADVANTAGES OF TWIT TER B OOTSTRAP

Properties for rounded corners, gradients and shadows which are of

css3 are used by twitter bootstrap but they are not supported in web

browser’s older versions specifically Internet Explorer.

Twitter Bootstrap Tutorial

www.webtechschools.com

FEATURES OF TWIT TER B OOTSTRAP

Developed, maintained and hosted by GitHub.

Mobile first design

Developers can give contribution to the platform.

Languages like Chinese, Spanish, and Russian etc. are present.

Twitter Bootstrap Tutorial

www.webtechschools.com

VERSIONS OF TWIT TER B OOTSTRAP

Version 1

V1.0.0, V1.1.0, V1.1.1, V1.2.0, V1.3.0, V1.4.0

Version 2

v2.3.2, v2.3.1, v2.3.0, v2.2.2, v2.2.1, v2.2.0, v2.1.1, v2.1.0, v2.0.4,

v2.0.3, v2.0.2, v2.0.1, v2.0.0 

Version 3

V3.2.0, v3.1.1, v3.1.0, v3.0.3, v3.0.2, v3.0.1, V3.0.0

Twitter Bootstrap Tutorial

www.webtechschools.com

DOWNLOAD TWITTER B OOTSTRAP

Downloading of bootstrap is very effortless.

http://getbootstrap.com/

Two modes of download - download bootstrap and download source.

Twitter Bootstrap Tutorial

www.webtechschools.com

CREATE WEBPAGES WITH TWIT TER B OOTSTRAP

1st step – Create html file

2nd step – Make this file a twitter bootstrap template

3rd step – Save file

Twitter Bootstrap Tutorial

www.webtechschools.com

GRID SYSTEM – TWIT TER B OOTSTRAP

Bootstrap grid system generates layouts by a series of

rows columns.

The default Bootstrap grid system is made of 12 columns

grid that creates 940px wide container without responsive

features enabled but you can enable them by adding

bootstrap-responsive.css file.

Twitter Bootstrap Tutorial

www.webtechschools.com

MOBILE FIRST STRATEGY IN TWITTER BOOTSTRAP

It contains 3 main components

Content

Layout

Progressive enhancement

Twitter Bootstrap Tutorial

www.webtechschools.com

CREATE FIXED AND FLUID LAYOUTS

For fixed –

.container class can be used to create fixed length layout

of web page. 

For fluid –

To make the layout fluid you change the class .container

to .container-fluid and row by .row to .row-fluid.

Twitter Bootstrap Tutorial

www.webtechschools.com

Thank you

Twitter Bootstrap Tutorial

www.webtechschools.com