Before we start we need to get an idea of the different components available to us. Based on the site sample we viewed earlier we can identify four key areas that we’ll need to build.
Navbar
The Navbar is a self-contained element that can be positioned at the top or the bottom of a page or element. Below is the code well need to implement a Navbar similar to what we have in the mock up. Copy an paste this code directly after the opening body tag. If you would like to customize its appearance, look at the documentation for your options.
<!-- Begin Navbar code block - http://twitter.github.com/bootstrap/components.html#navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Mars Curiosity Mission</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active"><a href="index.htm">Home</a></li>
<li><a href="http://www.jpl.nasa.gov/missions/details.php?id=5918">About Curiosity</a></li>
<li><a href="http://www.jpl.nasa.gov/spaceimages/search_grid.php?mission=Mars+Science+Laboratory+%28MSL%29">Photos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Other Missions<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.jpl.nasa.gov/missions/details.php?id=5864">Aquarius</a></li>
<li><a href="http://www.jpl.nasa.gov/missions/details.php?id=5890">Kepler</a></li>
<li><a href="http://www.jpl.nasa.gov/missions/details.php?id=5866">Cassini-Huygens</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div>
</div>
<!-- End Nav Bar -->
After you have added the code, save the document and then Preview in your web Browser (F12 or File > Preview in Browser).
Content Container
The Content Container is a structural element required by Bootstrap to maintain document dimensions. We’ll add one to our code below the close of the Navbar section. Be sure to place the other components inside of this container element.
<div class="container">
<!--Place other components inside this element -->
</div> <!-- /container -->
After you have added the code, save the document and then Preview in your web Browser (F12 or File > Preview in Browser).
Hero Element
A Hero Element is meant to be used as a call to action or a spot to feature a piece of content. The code we’ll use is below.
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>EAST 2013</h1>
<p>This is a demo site used to show off the capabilities of Twitter Bootstrap</p>
<p><a href="http://twitter.github.com/bootstrap/" class="btn btn-inverse">Learn more »</a></p>
</div>
<!-- End Hero Unit -->
After you have added the code, save the document and then Preview in your web Browser (F12 or File > Preview in Browser).
Three Column Grid
In order to add a row of grid columns we’ll need to add a div with the class="row" attribute added. Inside we can place up to 12 additional “columns” by adding a div with a class="spanX" with X being the number of columns we wish to span. For example we’d like 3 equal-sized columns in our mock up so we will add the following code…
<div class="span4">Column 1</div> <div class="span4">Column 2</div> <div class="span4">Column 3</div>
To duplicate the demo site we’ll need to use the following code…
<!-- Example row of columns - http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem-->
<div class="row">
<div class="span4">
<img src="img/team.jpg" alt="Team" class="img-polaroid">
<h2>The Team</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, <a href="#" class="tooltip" data-toggle="tooltip" title="This is an example of a tooltip">tortor mauris </a>condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-inverse" href="http://www.jpl.nasa.gov/">View details »</a></p>
</div>
<div class="span4">
<img src="img/rover.jpg" alt="Rover" class="img-polaroid">
<h2>The Rover</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, <a href="#" class="tooltip" data-toggle="tooltip" title="This is an example of a tooltip">tortor mauris </a>condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-inverse" href="http://www.jpl.nasa.gov/">View details »</a></p>
</div>
<div class="span4">
<img src="img/reentry.jpg" alt="Reentry" class="img-polaroid">
<h2>Reentry</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, <a href="#" class="tooltip" data-toggle="tooltip" title="This is an example of a tooltip">tortor mauris </a>condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-inverse" href="http://www.jpl.nasa.gov/">View details »</a></p>
</div>
</div>
<!-- End Row of Columns -->
After you have added the code, save the document and then Preview in your web Browser (F12 or File > Preview in Browser).
Footer
And the last little bit of code we’ll need to finish off the design is really just a bit of html5 that declares a footer for the document. Add this code inside the container element we created a few steps back.
<hr>
<!-- If you'd like to Experiment with the code do so here..... -->
<!-- End Experimentaion Area-->
<footer>
<p>© EAST Conference Demo | <a href="http://www.jpl.nasa.gov/imagepolicy/">Photo Credits</a></p>
</footer>
At this point you should have something that is starting to resemble this document. We are getting close but we can do better. Let’s take a look at customizing this to look closer to our mock up. View the next Module: Adding Custom CSS to a Bootstrap Mockup