The main advantage is we can build this using a simple text editor. Because we are just importing the Styles which are in Twitter Bootstrap.
First Of All we have to download Bootstrap from ,http://twitter.github.com/bootstrap/ the link. It Contain CSS ,IMG and JS Zipped file. Extract and copy the Files in a directory where you want to create your website.
Create an index HTML Page in your website directory where you copied the Bootstrap files.
Path definition :
We have to define the bootstrap files paths that we want to use in our web page. like bellow,
<html>
<head>
</head>
<link type="text/css" rel="stylesheet" href= "css/bootstrap.css" />
<body>
<script src="js/bootstrap.js"> </script>
</body>
</html>
Sample Form Creation :
First we will look are creating the Form for username and password. So for that we are using the class name as “well” which is in bootstrap css.
<html>
<head>
</head>
<link type="text/css" rel="stylesheet" href= "css/bootstrap.css" />
<body>
<form class="well form-search">
<button class="btn">Search</button>
</form>
<form class="well span6">
<label>UserName</label>
<input type="text"class="span3" placeholder="Enter username ..."/></br>
<label>Password</label>
<input type="text"class="span3" placeholder="Enter password ..."/></br>
<button class="btn btn-primary">Submit</button>
<button class="btn">Clear</button>
</form>
<script src="js/bootstrap.js"> </script>
</body>
</html>
After this Form creation if you get wow feeling please hit a comment.
Creating Tables:
sample file
<html>
<head>
</head>
<link type="text/css" rel="stylesheet" href= "css/bootstrap.css" />
<body>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dhanu</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Dhanu_2</td>
<td>20_2</td>
</tr>
</tbody>
</table>
<script src="js/bootstrap.js"> </script>
</body>
</html>
