Twitter Bootstrap 101: Introducing 2.0 [Responsive web design with Bootstrap] Part 1
11:48 AM
Web design with Twitter Bootstrap - Step 1
Download Twitter Bootstrap Files .Zip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Name of your page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Add a descritioon for your site">
<meta name="author" content="Add your name">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body> </body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Name of your page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Add a descritioon for your site">
<meta name="author" content="Add your name">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body> </body>
</html>
Web design with Twitter Bootstrap - Step 2
HTML5 Internet Explorer enabling script
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<link href="assets/css/normalize.css" rel="stylesheet">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap.css" rel="stylesheet">
Let's link to an external CSS file and name it as, "bootstrap.css".
/** CSS for a Fluid grid **/
.row-fluid {
width: 100%;
*zoom: 1;}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";}
.row-fluid:after {
clear: both;}
.row-fluid > [class*="span"] {
float: left;
margin-left: 2.127659574%;}
.row-fluid > [class*="span"]:first-child {
margin-left: 0;}
.row-fluid > .span12 {
width: 99.99999998999999%;}
.row-fluid > .span11 {
width: 91.489361693%;}
.row-fluid > .span10 {
width: 82.97872339599999%;}
.row-fluid > .span9 {
width: 74.468085099%;}
.row-fluid > .span8 {
width: 65.95744680199999%;}
.row-fluid > .span7 {
width: 57.446808505%;}
.row-fluid > .span6 {
width: 48.93617020799999%;}
.row-fluid > .span5 {
width: 40.425531911%;}
.row-fluid > .span4 {
width: 31.914893614%;}
.row-fluid > .span3 {
width: 23.404255317%;}
.row-fluid > .span2 {
width: 14.89361702%;}
.row-fluid > .span1 {
width: 6.382978723%;}
.container-fluid {
padding-left: 20px;
padding-right: 20px;
*zoom: 1;}
.container-fluid:before,
.container-fluid:after {
display: table;
content: "";}
.container-fluid:after {
clear: both;}
.row-fluid {
width: 100%;
*zoom: 1;}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";}
.row-fluid:after {
clear: both;}
.row-fluid > [class*="span"] {
float: left;
margin-left: 2.127659574%;}
.row-fluid > [class*="span"]:first-child {
margin-left: 0;}
.row-fluid > .span12 {
width: 99.99999998999999%;}
.row-fluid > .span11 {
width: 91.489361693%;}
.row-fluid > .span10 {
width: 82.97872339599999%;}
.row-fluid > .span9 {
width: 74.468085099%;}
.row-fluid > .span8 {
width: 65.95744680199999%;}
.row-fluid > .span7 {
width: 57.446808505%;}
.row-fluid > .span6 {
width: 48.93617020799999%;}
.row-fluid > .span5 {
width: 40.425531911%;}
.row-fluid > .span4 {
width: 31.914893614%;}
.row-fluid > .span3 {
width: 23.404255317%;}
.row-fluid > .span2 {
width: 14.89361702%;}
.row-fluid > .span1 {
width: 6.382978723%;}
.container-fluid {
padding-left: 20px;
padding-right: 20px;
*zoom: 1;}
.container-fluid:before,
.container-fluid:after {
display: table;
content: "";}
.container-fluid:after {
clear: both;}
Create a horizontal Navigation Bar
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="navbar-inner">
<div class="container-fluid">
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
Style for Navigation bar
/**Gereral CSS **/
p {
margin: 0 0 9px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;}
p small {
font-size: 11px;
color: #999999;}
ul,
ol {
padding: 0;
margin: 0 0 9px 25px;}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;}
ul {
list-style: disc;}
ol {
list-style: decimal;}
li {
line-height: 18px;}
/**nav bat**/
.navbar {
*position: relative;
*z-index: 2;
overflow: visible;
margin-bottom: 18px;}
.nav {
margin-left: 0;
margin-bottom: 18px;
list-style: none;}
.nav > li > a {
display: block;}
.nav > li > a:hover {
text-decoration: none;
background-color: #eeeeee;}
.navbar-fixed-top{
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;}
/** CSS3 used to create a gradient, a rounded border and box-shadow for the nav bar**/
.navbar-inner {
padding-left: 20px;
padding-right: 20px;
background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
.navbar .brand:hover {
text-decoration: none;}
.navbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
line-height: 1;
color: #ffffff;}
.nav-collapse.collapse {
height: auto;}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;}
.navbar .nav.pull-right {
float: right;}
.navbar .nav > li {
display: block;
float: left;}
.navbar .nav > li > a {
float: none;
padding: 10px 10px 11px;
line-height: 19px;
color: #999999;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar .nav > li > a:hover {
background-color: transparent;
color: #ffffff;
text-decoration: none;}
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
color: #ffffff;
text-decoration: none;
background-color: #222222;}
p {
margin: 0 0 9px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;}
p small {
font-size: 11px;
color: #999999;}
ul,
ol {
padding: 0;
margin: 0 0 9px 25px;}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;}
ul {
list-style: disc;}
ol {
list-style: decimal;}
li {
line-height: 18px;}
/**nav bat**/
.navbar {
*position: relative;
*z-index: 2;
overflow: visible;
margin-bottom: 18px;}
.nav {
margin-left: 0;
margin-bottom: 18px;
list-style: none;}
.nav > li > a {
display: block;}
.nav > li > a:hover {
text-decoration: none;
background-color: #eeeeee;}
.navbar-fixed-top{
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;}
/** CSS3 used to create a gradient, a rounded border and box-shadow for the nav bar**/
.navbar-inner {
padding-left: 20px;
padding-right: 20px;
background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);}
.navbar .brand:hover {
text-decoration: none;}
.navbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
line-height: 1;
color: #ffffff;}
.nav-collapse.collapse {
height: auto;}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;}
.navbar .nav.pull-right {
float: right;}
.navbar .nav > li {
display: block;
float: left;}
.navbar .nav > li > a {
float: none;
padding: 10px 10px 11px;
line-height: 19px;
color: #999999;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar .nav > li > a:hover {
background-color: transparent;
color: #ffffff;
text-decoration: none;}
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
color: #ffffff;
text-decoration: none;
background-color: #222222;}
Go to Web design with Twitter Bootstrap Step 2
You can design effective bootstrap web design with help of the post here. The information is very useful
മറുപടിഇല്ലാതാക്കൂWeb Design Company