Anand: November 2014

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>

We have added some CSS to make the background of the web page a light grey, this is so we can easily see the different columns within our design, making it easier to understand.

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>

Nothing new here, just a heading, lets swiftly move on to something more interesting, the twitter bootstrap navigation.
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>

The .navbar class holds all the styles for the navigation bar, then adding the .navbar-inverse class will apply the super cool black style that is so common with twitter bootstrap. I recommend expanding on these styles and creating something really unique, but for this bootstrap tutorial we will be sticking to the basic bootstrap styles.
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'

class='row-fluid'> <div class='span9 main'> <h2>Main Content Section</h2> </div> <div class='span3 sidebar'> <h2>Sidebar</h2> </div> </div>

This is where we need to understand the twitter bootstrap grid system, of course the bootstrap documentation covers it in detail here, but we will now cover the basics to get you started.
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.

In the code that we just pasted under the navbar you can see classes span9 and span3. This will divide the page into 9 columns width on the left and then 3 columns width on the right, making our content area and sidebar. A benefit to using this grid system is that it works out the width of each of these columns relative to the screen size, so you don’t have to worry about writing any extra media queries to get the site working on all screen resolutions.
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.

Anand

Translate

Tuesday, November 25, 2014

Twitter Bootstrap Tutorial – In 20 Minutes