BASIC HTML TEMPLATE
We need to start with a basic HTML template so we can include the required bootstrap files. Below is the start to our twitter bootstrap project, copy this code into a file and name it index.html.
<head>
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<style type='text/css'>
body {
background-color: #CCC;
}
</style>
</head>
<body>
</body>
</html> INCLUDE TWITTER BOOTSTRAP
To use twitter bootstrap there is only one file that we are required to include into our template, but there are many varieties available, please refer to the documentation if you wish to explore these options.For the sake of this twitter bootstrap tutorial, we will include one file bootstrap-combined.min.css via CDN so we don’t even need to download any files. Place the following code on the line after the title tags:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> TWITTER BOOTSTRAP CONTAINER
The bootstrap .container class is very useful and creates a centered area within the page that our other site content can be put within. The .container class is the equivalent of creating a #frame DIV with a static width and setting its margin: to auto; to center it. The benefit of the twitter bootstrap .container is that as it is responsive and will work out the best width to use for the screens current width.Within the body tags, create a division element with a class of container. This will act as the pages main wrapper where we will place all our other HTML code.
HEADER & NAVIGATION
Now we have a place to add our additional HTML code, we can add the heading text and then create the sites main navigation bar. Add the following text, or text of your choosing within the .container division element.<h1>TWITTER BOOTSTRAP TUTORIAL</h1> Bootstrap has a .nav class that allows us to create all kinds of navigation elements, place the following code after the h1 tags.
<div class='navbar navbar-inverse'>
<div class='navbar-inner nav-collapse' style="height: auto;">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
</ul>
</div>
</div> Within the .navbar division, we add another division element with the class .nav-collapse and some inline CSS of height: auto;. This is telling bootstrap that when the page is viewed within a browser, that has a window size of less that 979px it will provide a compressed alternative view.
If you save the index.html file and preview it in a browser you will be able to see this response on re-sizing the browser window, as illustrated below:
GREATER THAN 979 PIXELS
Additionally, we add a .nav class to the un-ordered list HTML element to apply more style from the bootstrap CSS and also add a .active class to the “Home” list element.
MAIN CONTENT & SIDEBAR
We have the main navigation of the site complete, now we need to add the main content area and a sidebar to hold more links / navigation routes. Add the following code directly after the navbar code:
'content'
The grid system utilizes a 12 column layout, meaning that the page can be divided by 12 equal columns if you so desire. The following image from the bootstrap documentation provides a good visual representation.
Experiment with this code by changing the span number and then try re-sizing the browser to see the effect. You will notice that after the .container become 724px wide, the columns will stack vertically.
Quickly throw the following text, or any text into the main content area directly after the h2 tags, just to pad out the site a little.
SIDEBAR NAVIGATION
Twitter bootstrap has a set of navigation elements available for use, you can see them all here.We are going to use the stacked tabs to create an additional navigation pane. Copy and paste the following code after the sidebar h2 tags.
class="nav nav-tabs nav-stacked">
<li><a href='#'>Another Link 1</a></li>
<li><a href='#'>Another Link 2</a></li>
<li><a href='#'>Another Link 3</a></li>
</ul>
CONCLUSION
This twitter bootstrap tutorial was a very quick blast through some of the features that twitter bootstrap can offer, over time and practice along with reading the official documentation it won’t be long before you are a bootstrap wiz. 
