Title

Bootstrap Tipps

Navbar

> dieses Beispiel als Videotutorial

Die Navbar ist eine der bevorzugten Features in Bootstrap.

Die Klasse navbar-default oder navbar-inverse bestimmt das Aussehen.

Der Titel wird in navbar-header eingeschlossen, dann folgen die Links in einer ul List mit den Klassen" nav navbar-nav"

<div class="navbar navbar-default">
	<div class="container-fluid">

		<div class="navbar-header">
			<a class="navbar-brand" href="#">Title</a>
		</div>

		<ul class="nav  navbar-nav">
				<li class="active"><a href="#">Home</a></li>

				<li><a href="#">Produkte</a></li>

				<li><a href="#">Shop</a></li>

				<li><a href="#">Impressum</a></li>
		</ul>

	</div>
</div>

a class="navbar-brand" erzeugt eine größere Schrift

Eine Navbar am oberen Rand fixiert. Hier sollte dem body tag ein padding von 70 Pixeln zugewiesen werden. Gleiches gilt für die navbar-fixed-bottom

<div class="navbar navbar-fixed-top">

<div class="navbar navbar-fixed-bottom">

Eine Navbar, die normal scrollt. Eigentlich ist es ja das normale Verhalten.

<div class="navbar navbar-static-top">

Eine farblich negative Navbar

<div class="navbar navbar-inverse">

Responsive Navbar

 

Ihr könnt euch auch das Beispiel komplett aus Bootstrap kopieren und abspecken.

Hier einige Infos.

Alles wird in class="navbar" eingeschlossen.

div navbar eingeschlossen, wie gehabt

Darin div class="container-fluid"

das nächste div navbar-header umschließt alles was zu sehen ist, wenn die Navbar zusammengeklappt ist.

Der <a > Tag stellt den Button dar, der erscheint, wenn die Navbar zusammengeklappt ist. Die icon-bar sind Linien.

Es folgt ein brand Titel der auch zu sehen ist, wenn die Navbar zusammengeklappt ist.

In collapse wird alles zusammengefasst, was

Man beachte auch, wie data-target die ID zugewiesen wird. 

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

	  <div class="container-fluid">
		  <!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
		  <div class="navbar-header">
			  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarBeispiel-1">
			  <span class="sr-only">Navigation ein-/ausblenden</span>
			  <span class="icon-bar"></span>
			  <span class="icon-bar"></span>
			  <span class="icon-bar"></span>
			  </button>
		  	 <a class="navbar-brand" href="#">Logo</a>
		  </div>

      
	 <!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
	  <div class="collapse navbar-collapse" id="navbarBeispiel-1">
	 	 <ul class="nav navbar-nav">
	  		<li class="active"><a href="#">Home</a></li>
	  		<li><a href="#">Über uns</a></li>
	  		<li><a href="#">Produkte</a></li>
	  		<li><a href="#">Kontakt</a></li>
	  		<li><a href="#">Impresssum</a></li>
	  	</ul> 
	  </div><!-- /.navbar-collapse -->
  
  </div><!-- /.container-fluid -->

 </nav>

Form Elemente in der Navbar

form-Elemente sollten in einer Navbar folgende Klassenzuweisung erhalten:

<form class="navbar-form">

oder wenn es zur rechten Seite ausgerichtet sein soll:

<form class="navbar-form pull-right">

<input type="text" class="span2" id="vorname">

<button type="submit" class="btn">Suchen</button>

</form>

Textfelder im 0S2 Look mit runden Seiten bekommen die Klassenzuweisung navbar-search anstatt navbar-form

<form class="navbar-search" accept-charset="utf8">

<input type="text" class="search-query" placeholder="Suchen">

</form>
Title