Navigation

Basic Navbar

 1<div class="navbar">
 2    <div class="navbar-inner">
 3        <a class="brand" href="/"><span class="logo logo-white"></span></a>
 4        <ul class="nav">
 5          <li><a href="#">Item 1</a></li>
 6          <li><a href="#">Item 2</a></li>
 7        </ul>
 8    </div>
 9</div>

Alignment

You can align a .nav to the right by appending a .pull-right class.

1<ul class="nav pull-right">
2  <li><a href="#">Item 1</a></li>
3  <li><a href="#">Item 2</a></li>
4  <li><a href="#"><i class="glyphicons log_out"></i></a></li>
5</ul>

Input

1<ul class="nav pull-right">
2  <li><form><input type="text" placeholder="Search ..." /></form></li>
3</ul>

The gem also includes style for a footer. It can be used with .row and .spanNUM classes. <ul> elements in the footer will automatically get styled without bullets, and with a special header font applied to the first <li>. The footer should be used outside the .container class, with a .container element inside the footer.

All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners.


 1<footer>
 2    <div class="row">
 3        <div class="span3 offset1">
 4            <span class="logo"></span>
 5            <p class="small">All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners.</p>
 6        </div>
 7        <div class="span3 offset1">
 8            <ul>
 9                <li>About O'Reilly</li>
10                <li><a href="#">Academic Solutions</a></li>
11                <li><a href="#">Jobs</a></li>
12                <li><a href="#">Contact</a></li>
13      </ul>
14        </div>
15    </div>
16</footer>