Szybki kurs Twitter Bootstrap przyspiesza. W dzisiejszym odcinku dodamy do naszej strony stopkę z dwoma kolumnami (<footer>), a lewą kolumnę otoczymy ramką (klasa CSS well). To będzie nasze menu nawigacyjne.

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Tutorial Lesson 3</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
 <div class="container">
  <header>
   <h1>Tytuł strony</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
   do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
   enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
   ut aliquip ex ea commodo consequat.</p>
  </header>
  <div class="row">
   <div class="span3">
   <div class="well">
    <h2>Kolumna lewa</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
   </div>
   <div class="span9">
    <h2>Kolumna prawa</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>
  </div>
  <hr />
  <footer>
   <div class="row">
    <div class="span6">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
     do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
     enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat.</p>
	</div>
	<div class="span6">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
     do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
     enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat.</p>
	</div>
   </div>
  </footer>
 </div>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

Zauważcie, że szerokość prawej kolumny została zmniejszona z 9 do 8 jednostek (span9 -> span8). Jest to efektem dodania ramki (well) do lewej kolumny. Dodatkowe ozdobniki zajęły jedną jednostkę szerokości. Efekt naszej pracy powinien wyglądać mniej więcej tak:

Niby mało, ale zauważcie jak mało kodu HTML/CSS trzeba było do tej pory napisać. Tyle co kot napłakał.