Hi friend this tutorial will teach you how to create the basic bootstrap template design. Before you start to develop bootstrap template you have knowledge about HTML, CSS & JavaScript. if you have good knowledge of these technologies you can learn it very fast. Now the thing what are the requirement to start the bootstrap? you just have a editor on your PC and a browser to view the output.
2. Extract the bootstrap.zip file
3. Copy all the extract files
4. Paste all Bootstrap Files into your project directory
5. Create a new blank HTML file in project directory
6. Download jQuery.min.js
Open the linke http://blog.jquery.com/2012/08/30/jquery-1-8-1-released/ and download jquery.min.js file.
7. Copy jQuery.min.js into the directory project/js/
Copy the downloaded jquery.mon.js file into the directory {project/js/}
8. Attach the JS files
Now time to attach the downloaded bootstrap javascript files and jQuery.min Javascript files into your documents. So open the blank html file and add some some code into the head section of your html file mentioned below:-
<!-- Attach javascript files -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-1.8.1.min.js" type="text/javascript"></script>
9. Create your own template.css
You can also create your own css file with any name. There i create my own template.css for my custom styles in {project/css/} directory
10. Attach CSS files
Now time to attach necessery CSS files into the our html document. Using the below mentioned code you can attach the css files into your html document:-
<!-- Attach CSS files -->
<link href="css/bootstrap.min.css" tyle="text/css" rel="stylesheet" />
<link href="css/bootstrap-responsive.min.css" tyle="text/css" rel="stylesheet" />
<link href="css/template.css" tyle="text/css" rel="stylesheet" />
11. Create your custom CSS style
You can create your custom css style for formatting your elements in {project/css/template.css}
.logo{ background-color:#d2d2d2;}
.navigation{ background-color: #a3fbbe;}
.banner{ background-color: #fcb1b1;}
.content{ background-color: #fbf0a3;}
.leftnav{ background-color: #a3bcfb;}
.footer{ background-color: #eca3fb;}
12. Create Logo Section
To create logo section on your html document in the <body> tag first add a <div> a tag with class name of 'container' & 'logo' within this tag add <img> tag to insert logo.
<body>
<div class="container logo">
<img src="img/logo.jpg" alt="Logo" />
</div>
</body>
13. Create Navigation
After the logo div add another <div> with the class name of 'container' & 'navigation' and add the below mentioned code into the div tag.
1. Download Bootstrap framework.
First open the url http://twitter.github.io/bootstrap/ click on the download button and download the bootstrap framework.
3. Copy all the extract files
4. Paste all Bootstrap Files into your project directory
5. Create a new blank HTML file in project directory
6. Download jQuery.min.js
Open the linke http://blog.jquery.com/2012/08/30/jquery-1-8-1-released/ and download jquery.min.js file.
7. Copy jQuery.min.js into the directory project/js/
Copy the downloaded jquery.mon.js file into the directory {project/js/}
8. Attach the JS files
Now time to attach the downloaded bootstrap javascript files and jQuery.min Javascript files into your documents. So open the blank html file and add some some code into the head section of your html file mentioned below:-
<!-- Attach javascript files -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-1.8.1.min.js" type="text/javascript"></script>
9. Create your own template.css
You can also create your own css file with any name. There i create my own template.css for my custom styles in {project/css/} directory
10. Attach CSS files
Now time to attach necessery CSS files into the our html document. Using the below mentioned code you can attach the css files into your html document:-
<!-- Attach CSS files -->
<link href="css/bootstrap.min.css" tyle="text/css" rel="stylesheet" />
<link href="css/bootstrap-responsive.min.css" tyle="text/css" rel="stylesheet" />
<link href="css/template.css" tyle="text/css" rel="stylesheet" />
11. Create your custom CSS style
You can create your custom css style for formatting your elements in {project/css/template.css}
.logo{ background-color:#d2d2d2;}
.navigation{ background-color: #a3fbbe;}
.banner{ background-color: #fcb1b1;}
.content{ background-color: #fbf0a3;}
.leftnav{ background-color: #a3bcfb;}
.footer{ background-color: #eca3fb;}
12. Create Logo Section
To create logo section on your html document in the <body> tag first add a <div> a tag with class name of 'container' & 'logo' within this tag add <img> tag to insert logo.
<body>
<div class="container logo">
<img src="img/logo.jpg" alt="Logo" />
</div>
</body>
13. Create Navigation
After the logo div add another <div> with the class name of 'container' & 'navigation' and add the below mentioned code into the div tag.