Bootstrap Tutorial - Part II

Part Two of a series of tutorials on how to design a adaptive website using Bootstrap. Document structure, Including files, Fluid grid system and CSS classes.

Having downloaded and decompressed Bootstrap, now we are going to create a web page and include the files provided by the framework.

Bootstrap is designed for HTML5, so go ahead and create a .html document inside of the c:\bootstrap\ folder using your favorite text editor or IDE and name it index.html. For the scope of this tutorial, you don't need Dreamweaver or Kompozer, any advanced text editor like JEdit will be more than enough.

This is my base structure for the HTML5 document, it is a pretty common HTML5 declaration with an added shim for IE9 backwards compatibility.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Tutorial – Multicored!</title>
<!-- HTML5 shim for IE backwards compatibility -->
    <!--[if lt IE 9]>
      
    <![endif]-->
</head>
<body>
</body>
</html>

Since we are creating an adaptive design, we need to set the initial viewport scale. For that we need a tag like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This chunk of code also tells the browser to assume that the page is as wide as the device.

If you look inside of the CSS folder, you will see four stylesheets:

bootstrap.css

bootstrap.min.css

bootstrap-responsive.css

bootstrap-responsive.min.css

This stylesheets are basically two sets if two, and the difference is that the ones including the word "min" in the tittle have being stripped of all the extra spaces that make it human readable to minimize their wight and optimize downloads. Let's include the ones that are optimized for reading:

<link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">

Next we are going to include the JavaScript files, Jquery to be exact. The <script> tag can be included either at the <head> of the page or in the <body> just before the closing tag but I prefer including them just before closing . We're going to include a line of code to make sure Bootstrap is always updated with the latest JQuery and the other one is to include the .js files:

<script src="http://code.jquery.com/jquery-latest.js">
</script><script src="/js/bootstrap.min.js"></script>

Now you have included all the necessary files and are ready to start adding content!

The fluid grid.

Bootstrap is based in a 12 columns layout. The default layout is called "Grid system", based in a 940px width design, it is an adaptive layout. We will be using a fluid design approach, which is called "Fluid grid system". The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as the fixed grid system, ensuring proper proportions for key screen resolutions and devices.

If you go to http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem you can get idea of what this fluid grid system is and how it works:

12 columns fluid grid layout.

Now we'll show you how to make a fluid grid like the one shown in the above picture and that way you'll learn by doing!

Let's create a global container div to wrap all the elements of the page and assign it a class of "container-fluid". This class states that we are creating a fluid layout:

<div id="global-container" class="container-fluid">

 Now we create another <div> with a class of "row-fluid". This class indicates that this is part of a fluid layout. In our fluid grid, this is the first row:

<div class="row-fluid grid-sample">

 Having created the first row, we need to create the columns. We can create anywhere from one to twelve columns, and we can also state how wide do we want them to be. It is important to highlight that the number of columns times the width, will always equal 12. For instance, if you decide to create two columns, their width will be six, so 2x6=12.

And by know you should probably be asking to yourself: Six what? Pixels, inches? None of them! The fluid layout is based in percentages, so em is the unit used here, but even though, when we say "two columns with a width of six each", what we mean is "two columns spanning the area of six columns each", and that's why the classes applied to the columns will range from "span1" to "span12"

Creating the columns in the first row:

<div class="row-fluid grid-sample">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>

In the above code we created twelve divisions with a class of "span1" within the "row-fluid" class. We also assigned to the last one a class of "grid-sample" that will be useful for CSS styling later on.

Creating the columns in the second row:

<div class="row-fluid grid-sample">
<div class="span3">3</div>
<div class="span3">3</div>
<div class="span3">3</div>
<div class="span3">3</div>
</div>

Here we have created four columns, each one one them spanning across the space of three columns

Creating the columns in the third row:

<div class="row-fluid grid-sample">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>

Now we have created three columns, each one as wide as four columns.

Creating the columns in the fourth row:

<div class="row-fluid grid-sample">
<div class="span6">6</div>
<div class="span6">6</div>
</div>

Above we have created two columns of the class "spam6", which occupy 50% of the available space each.

Last, we are going to create a single column that will span across the full width of the parent container.

<div class="row-fluid grid-sample">
<div class="span12">12</div>
</div>

Now you have a grid like the one shown above, but it probably still doesn't look the same. It is because you need a little bit of styling. CSS is out of the scope of our course, but here is a basic styling for the above grid:

.grid-sample {
margin-top: 40px;
}
.grid-sample
[class*="span"] {
background-color: #CCC;
min-height: 40px;
line-height: 40px;
font-size: 14px;
text-align: center;
border-radius: 3px;
margin-bottom: 5px;
}
.grid-sample
[class*="span"]:hover {
background-color: #999;
}

Just to make sure you have followed all the steps, and in case something isn't going as spected, your .html document should now look like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap tutorial - Multicored!</title>
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <style type="text/css"> .grid-sample { margin-top: 40px; } .grid-sample [class*="span"] { background-color: #CCC; min-height: 40px; line-height: 40px; font-size: 14px; text-align: center; border-radius: 3px; margin-bottom: 5px; } .grid-sample [class*="span"]:hover { background-color: #999; } </style> </head> <body> <div id="global-container" class="container-fluid"> <div class="row-fluid grid-sample"> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> </div> <div class="row-fluid grid-sample"> <div class="span3">3</div> <div class="span3">3</div> <div class="span3">3</div> <div class="span3">3</div> </div> <div class="row-fluid grid-sample"> <div class="span4">4</div> <div class="span4">4</div> <div class="span4">4</div> </div> <div class="row-fluid grid-sample"> <div class="span6">6</div> <div class="span6">6</div> </div> <div class="row-fluid grid-sample"> <div class="span12">12</div> </div> </div> <script src="/js/bootstrap.min.js"></script> </body> </html>

 

In the next chapter we will start designing a website for a fictitious company, applying the concepts explained here and will introduce new elements such as a hero unit and links styled as buttons.