web:design:framework:bootstrap:navbars

Navigationsleisten liegen standardmäßig am oberen Rand der Seite. Sie werden so definiert:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

Möchte man eine Invertierte Leiste (dunkel mit hellem Text), nimmt man

.navbar-inverse

statt

.navbar-default

• http://getbootstrap.com/components/#navbar
• http://getbootstrap.com/components/#nav
• http://www.w3schools.com/bootstrap/bootstrap_case_menu.asp
• http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp
• http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp
• http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Menüleisten können horizintal oder vertikal angeordnet sein. Sie können als Tabs oder Pills realisiert werden.

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

Für vertikale Menüleisten wird die Klasse nav-stacked eingefügt.