This page is pure HTML5 with just a single style sheet reference and no JS. All this is using is the core bootstrap.css.
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
<link rel="stylesheet" href="/css/bootstrap.css">
</head>
And as expected the <div> tags rule, defining the general page layout. There is one for the static navigation bar at the top, one for the navigation list on the side and one for the content panel.
This brings to life the top navigation bar, with the body leaving some padding for it:
<body style="padding-top: 50px;">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner container">
<a class="brand" href="../index.html"> Home</a>
<ul class="nav">
<li><a href="index.html" >Overview</a></li>
<li><a href="bootstrap.html">Bootstrap</a></li>
<li><a href="html5.html" >HTML5</a></li>
<li><a href="jscript.html" >Javascript</a></li>
<li><a href="jquery.html" >jQuery</a></li>
<li><a href="angular.html" >Angular.JS</a></li>
<li><a href="jersey.html" >Jersey</a></li>
<li><a href="couchdb.html" >CouchDB</a></li>
</ul>
</div>
</div>
And these are the two columns in the main area, with the navigation list on the left:
<div class="container">
<div class="row">
<div class="span2">
<ul class="nav nav-list">
<li><a href="#Stylesheet">Stylesheet</a></li>
<li><a href="#Navigation">Navigation bar</a></li>
<li><a href="#Columns" >Column layout</a></li>
</ul>
</div>
<div class="span10">
<h1 id="Bootstrap">Bootstrap</h1>
</div>
</div>
</div>
</body>
The navigation bar here does not open up to any dropdown menus and the navigation list scrolls out of sight quickly. Dropdowns require events (clicking with the mouse or hovering over the triggering element) to be raised and processed. The overview page does have at least one drop-down menu (on the 'jQuery' item). Because Bootstrap relies on jQuery for its own bits of Javascript magic, I'll delve into the subject of more complex navigation bars and how to avoid pasting them into every page in the jQuery context.