Twitter BootStrap Samples

Bootstrap is a CSS Framework developed by Twitter. It is an Open Source So everybody can use it . We can build very Cool and awesome  websites from this CSS styles. It contains buttons, Forms, Text Boxes and Tables as well.
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">

    <input type="text" class="span3 search-query" placeholder="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>




No comments:

Post a Comment