twitter bootstrap tutorial, twitter bootstrap tutorial for starter, twitter bootstrap tutorial for beginners, twitter bootstrap download, twitter bootstrap grid system, twitter bootstrap versions, twitter bootstrap helps in web development and designing, twitter bootstrap definition, twitter bootstrap latest version, twitter bootstrap , why we use twitter bootstrap, twitter bootstrap history, twitter bootstrap features, twitter bootstrap tutorial audience, twitter bootstrap essential things, twitter bootstrap grid system

1. TWITTER BOOTSTRAP TUTORIAL
Twitter Bootstrap Tutorial
www.webtechschools.com

2. 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

3. THIS TUTORIAL CONTAINS
 Definition
 Advantages
 Disadvantages
 Futures
 Versions
 And Many more
Twitter Bootstrap Tutorial
www.webtechschools.com

4. DEFINITION OF TWITTER
BOOTSTRAP
 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

6. ADVANTAGES OF TWITTER
BOOTSTRAP
 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

7. DISADVANTAGES OF
TWITTER BOOTSTRAP
 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

8. FEATURES OF TWITTER
BOOTSTRAP
 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

10. VERSIONS OF TWITTER
BOOTSTRAP
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

11. DOWNLOAD TWITTER
BOOTSTRAP
 Downloading of bootstrap is very effortless.
 http://getbootstrap.com/
 Two modes of download - download bootstrap and download source.
Twitter Bootstrap Tutorial
www.webtechschools.com

12. CREATE WEBPAGES WITH
TWITTER BOOTSTRAP
1st step – Create html file
2nd step – Make this file a twitter bootstrap template
3rd step – Save file
Twitter Bootstrap Tutorial
www.webtechschools.com

13. GRID SYSTEM – TWITTER
BOOTSTRAP
 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

14. MOBILE FIRST STRATEGY
IN TWITTER BOOTSTRAP
It contains 3 main components
 Content
 Layout
 Progressive enhancement
Twitter Bootstrap Tutorial
www.webtechschools.com

15. 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

16. Thank you
Twitter Bootstrap Tutorial
www.webtechschools.com