PURPOSE
Grids are small boxes css-ed by twitter bootstrap where you can put content.
it consists of 12 columns per row and the structure to create one is :
container-div > row-div > span-div
There are two types of grid: fixed and fluid. In the fixed grid the size of the boxes
are based on pixels but in the fluid there are based on percentage which means
according to your device width and height,boxes may be larger or smaller.
WHAT YOU NEED TO KNOW
Below is the basic format for a 12columns fully occupied,you can make small boxes of size 1 twelve times or 6 twice and so on. if you go over 12 columns,the next box shows up on the next line.
CODE
</style>
<div class="row">
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
</div>
<div class="row">
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
</div>
<div class="row">
<div class="span3">3
</div>
<div class="span3">3
</div>
<div class="span3">3
</div>
<div class="span3">3
</div>
</div>
<div class="row">
<div class="span4">4
</div>
<div class="span4">4
</div>
<div class="span4">4
</div>
</div>
<div class="row">
<div class="span5">5
</div>
<div class="span5">5
</div>
<div class="span2">2
</div>
</div>
<div class="row">
<div class="span6">6
</div>
<div class="span6">6
</div>
</div>
<div class="row">
<div class="span7">7
</div>
<div class="span5">5
</div>
</div>
<div class="row">
<div class="span8">8
</div>
<div class="span4">4
</div>
</div>
<div class="row">
<div class="span9">9
</div>
<div class="span3">3
</div>
</div>
<div class="row">
<div class="span10">10
</div>
<div class="span2">2
</div>
</div>
<div class="row">
<div class="span11">11
</div>
<div class="span1">1
</div>
</div>
<div class="row">
<div class="span12">12
</div>
</div>
<div class="row">
<div class="span6 offset6">span6 with offset6
</div>
</div>
<div class="row">
<div class="span12" style="background:yellow;color:black">nested row
<div class="row" >
<div class="span6" >span6</div>
<div class="span6">span6</div>
</div>
</div>
</div>
</div>
OUTPUT
Grids are small boxes css-ed by twitter bootstrap where you can put content.
it consists of 12 columns per row and the structure to create one is :
container-div > row-div > span-div
There are two types of grid: fixed and fluid. In the fixed grid the size of the boxes
are based on pixels but in the fluid there are based on percentage which means
according to your device width and height,boxes may be larger or smaller.
fixed grid
WHAT YOU NEED TO KNOW
Below is the basic format for a 12columns fully occupied,you can make small boxes of size 1 twelve times or 6 twice and so on. if you go over 12 columns,the next box shows up on the next line.
<div class="container">
<div class="row">
<div class="span12">(content goes here)
</div>
</div>
</div>
CODE
<!DOCTYPE html>
<html>
<head>
<title>Scaffolding</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>
<script src="js/jquery.js"></script>
<style>
.span1,.span2,.span3,.span4,.span5,.span6,.span7,.span8,.span9,.span10,.span11,.span12{
background: black;
color:white;
text-align:center;
margin-bottom: 5px;
margin-top:5px;
}
</style>
</head>
<body>
<div class="container"><div class="row">
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
</div>
<div class="row">
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
</div>
<div class="row">
<div class="span3">3
</div>
<div class="span3">3
</div>
<div class="span3">3
</div>
<div class="span3">3
</div>
</div>
<div class="row">
<div class="span4">4
</div>
<div class="span4">4
</div>
<div class="span4">4
</div>
</div>
<div class="row">
<div class="span5">5
</div>
<div class="span5">5
</div>
<div class="span2">2
</div>
</div>
<div class="row">
<div class="span6">6
</div>
<div class="span6">6
</div>
</div>
<div class="row">
<div class="span7">7
</div>
<div class="span5">5
</div>
</div>
<div class="row">
<div class="span8">8
</div>
<div class="span4">4
</div>
</div>
<div class="row">
<div class="span9">9
</div>
<div class="span3">3
</div>
</div>
<div class="row">
<div class="span10">10
</div>
<div class="span2">2
</div>
</div>
<div class="row">
<div class="span11">11
</div>
<div class="span1">1
</div>
</div>
<div class="row">
<div class="span12">12
</div>
</div>
<div class="row">
<div class="span6 offset6">span6 with offset6
</div>
</div>
<div class="row">
<div class="span12" style="background:yellow;color:black">nested row
<div class="row" >
<div class="span6" >span6</div>
<div class="span6">span6</div>
</div>
</div>
</div>
</div>
</body>
</html>
fluid grid
we will use the same code above and replace "container" by "container-fluid" and "row" by "row-fluid" and also make sure that all nested rows have their columns equal to 12 if not it
will not display as in the fixed grid. You will see that with the fluid grid , the boxes spread all
over the screen and are responsive like the fixed grid. You can put both on the same page and see the difference.
over the screen and are responsive like the fixed grid. You can put both on the same page and see the difference.
CODE
<div class="container-fluid">
<div class="row-fluid">
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
<div class="span1">1
</div>
</div>
<div class="row-fluid">
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
<div class="span2">2
</div>
</div>
<div class="row-fluid">
<div class="span3">3
</div>
<div class="span3">3
</div>
<div class="span3">3
</div>
<div class="span3">3
</div>
</div>
<div class="row-fluid">
<div class="span4">4
</div>
<div class="span4">4
</div>
<div class="span4">4
</div>
</div>
<div class="row-fluid">
<div class="span5">5
</div>
<div class="span5">5
</div>
<div class="span2">2
</div>
</div>
<div class="row-fluid">
<div class="span6">6
</div>
<div class="span6">6
</div>
</div>
<div class="row-fluid">
<div class="span7">7
</div>
<div class="span5">5
</div>
</div>
<div class="row-fluid">
<div class="span8">8
</div>
<div class="span4">4
</div>
</div>
<div class="row-fluid">
<div class="span9">9
</div>
<div class="span3">3
</div>
</div>
<div class="row-fluid">
<div class="span10">10
</div>
<div class="span2">2
</div>
</div>
<div class="row-fluid">
<div class="span11">11
</div>
<div class="span1">1
</div>
</div>
<div class="row-fluid">
<div class="span12">12
</div>
</div>
<div class="row-fluid">
<div class="span6 offset6">span6 with offset6
</div>
</div>
<div class="row-fluid">
<div class="span12" style="background:yellow;color:black">nested row-fluid
<div class="row-fluid" >
<div class="span6" >span6</div>
<div class="span6">span6</div>
</div>
</div>
</div>
</div>
OUTPUT
No comments:
Post a Comment