Introduction
 |
| bootstrap logo |
Are you a web developer and do have enough
time to make your website nice and professional by using css3,jquery and others.If so bootstrap if for
you.
Bootstrap is a web design framework by using
this you can build your website without writing much code in css or javascript.All you need to just declare css class
in your html.Thats it,rest of the design work will done by bootstrap css library.Mainly bootstrap is a collection of
class for different use and with different style.
Bootstrap is responsible.Thats means you do
not need to apply several css for desktop,table or phone.Just one css file is enough for handling multi platform
issue.
For learning convention we divided whole
tutorial into several section
- Download and include bootstrap
- creating layout
- creating section and column
- typography
- working with box and table
- forms
- buttons
- icon
- navbar
Download and set up bootstrap
It was said before that bootstrap is noting
but some css and javascript build in library.Bootstrap javascript is complex so i personally use Jquery UI for
javascript work.It is hundread time easier and faster than Bootstrap javascript library.
Go to http://getbootstrap.com/ and there have two option for you.Dowload bootstrap
is only bootstrap css and js files no example or demos.If you want to
download bootstrap with sample file then
click
Add these three folder to your project
folder.Now add bootstrap.min.css or bootstrap.css in your header as we link external css file.Notice both of them are
same bootstrap.min.css is the minimize version of bootstrp.css.
If you need any javascript in your bootstrap
then add bootstrap.min.js as we link external .js file in webpage.Before that you have to include jquery library
also.
Creating Layout of webpage
basic template
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--if Internet explorer is less than 9 than two file are important for html5 and responsible layout.--> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-- >
</head>
<body>
<div class="alert alert-success">Congratulation You Successfully setup Bootsrap.</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -- >
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--if Internet explorer is less than 9 than two file are important for html5 and responsible layout.--> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-- >
</head>
<body>
<div class="alert alert-success">Congratulation You Successfully setup Bootsrap.</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -- >
<script src="js/bootstrap.min.js"></script>
</body>
</html>
 |
| if you include everything correctly you see exactly this in your browser |
Column Layout
You may already familiar with two column or
three column layout website.Bootstrap has same facility but more than that.By default bootstrap is responsive.If
your build three column layout web page in bootstrap and browser windows size is smaller( like in table) then it
collapse into one or two column, baseed on client browser size.
bootstrap use 12 column grid system
layout.That means it consider whole browser window 12 column (similar to table
column).Each and every device(like phone,table,desktop) browser width consider 12 column.
Max container width(browser with) in LED or LCD monitor is 1170px,Older computer monitor 970px,table 750px,mobile less
than 750px.
One column equal to 95px in LED - LCD ,78px in old desktop
monitor,60px in tablet.
Now suppose we are building webpage for tablet specific.we need 200px similar left
sidebar and 500px similar main body.we can distribute it to 3 column and 9 column respectively.After that,If we
browser this website in LED or other monitor than it still remain same two column layout and size of each column expand
according to current device.But if we browse same webpage in mobile phone which width is smaller than tablet than two
column layout does not exist and it converted to one column.Each column become an individual row.
Layout related Class in Bootstrap
whole webpage have to contain withing container class.As said before each row have 12 column,you can add as many column
you want and also can add nested column.This is 100% same to table in html.Think you are creating a table based
layout.Then it is much more easier for you to follow rest of the article.
.container is main wrapper class
.row is creating a new row
.col-lg-* it means column large(Lcd,Led) compatible like .col-lg-4 means four coloumn
.col-md-* means column medium(older PC monitor)
.col-sm-* means small device (tablet)
.col-xs-* extra small device(mobile)
Every class declare column but their name is different based on platform you like to work.
View the source of previous Live example source and you can find there use of above classes.
Move columns to the right using .col-(md,lg,sm,xs)-offset-* classes. These classes increase the left margin of a column
by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.
