> dieses Beispiel als Videotutorial
Bootstrap stellt eine Reihe von Navigationselementen bereit, die durch die Klasse .nav definiert werden. Weitere Klassen bestimmen das Aussehen.
Eine Navigation wird meist mittels einer Unordered List erzeugt.
<ul class="nav">
Der aktuelle Link bekommt eine class="active" Dadurch wird er hervorgehoben.
<li class="active">
Deaktivierung eines Links durch die Klasse disabled:
<li class="disabled">
Zwischen den List Elementen müssen Links eingefügt werden, einfache Texte reichen nicht.
Verschiedene Arten von Navigationen:
<ul class="nav nav-pills">
Pills vertikal durch nav-stacked (siehe Navigation auf der linken Seite dieser Tipps)
<ul class="nav nav-pills nav-stacked">
<ul class="nav nav-list">
Hier sehen wir eine nav-list, Das oberste Listenelement als Überschrift sieht so aus: <li class="nav-header">
Unter Kontakt wurde auf folgende Weise ein Trennstrich erzeugt.
<li class="divider"></li>
<ul class="nav nav-tabs">
Beachte, dass eines der li Elemente eine class="active" bekommen muss, ansonsten sieht es nicht aus wie Tabulatoren.
Navigation und Dropdown basieren beide auf ul Listen.
Das Dropdown Menü, welches aus einer ul List besteht, wird in ein li Listelement einer Navigation direkt unter den <a> Link gesetzt.
<ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Home<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>..</li>
<li>..</li>
</ul>
</li>
/*weitere listelemente*/
</ul>
Hier der komplette Code des Beispiels. Das funktioniert natürlich genauso mit nav-pills
<ul class="nav nav-tabs">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Home<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Willi</a></li>
<li><a href="#">Wonka</a></li>
<li><a href="#">Schoko</a></li>
<li><a href="#">Lada</a></li>
</ul>
</li>
<li><a href="javascript:;">Profil</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
Anklickbare Tabs, welche zugewiesenen Inhalt anzeigen.
Eine Dose (von mittelniederländisch Dose für ‚Behälter zum Tragen‘, ‚Lade‘, ‚Koffer‘; in Deutschland seit dem 17. Jahrhundert belegt) ist ursprünglich ein kleiner, meist eckiger, runder oder ovaler Behälter mit Deckel. Bis ins 19. Jahrhundert waren Dosen reich verzierte Luxusgegenstände, die in Form von Porträtdosen auch als Prunk- und Ehrengeschenke vergeben wurden. Sie dienten, wenn sie nicht nur Ausstellungsstücke waren, zur Aufbewahrung besonders wertvoller Güter – z. B. als Zuckerdose, Konfektdose (Bonbonniere), Tabakdose (Tabatiere) oder auch als Spardose. Als besonders luxuriöse Varianten mit überraschendem Inhalt entstanden Dosenuhren und Spieldosen. Dosen wurden kunsthandwerklich aus Materialien wie Edelmetall, Alabaster und Porzellan hergestellt und mit Einlagen aus Elfenbein, Perlmutt, Schildpatt, Bernstein oder Email geschmückt.
Eine Flasche ist ein verschließbares Behältnis zum Transport und zur Lagerung von Flüssigkeiten und Gasen. Sie besteht meist aus Glas, Kunststoff oder Metall. Am häufigsten werden in Flaschen Getränke aufbewahrt. Die Flasche samt Verschluss schützt das Getränk vor dem Eindringen von Fremdstoffen, wie Bakterien, und vor Verdunstung. Viele Flaschen bestehen aus getöntem Material, um die Sonneneinstrahlung, insbesondere UV-Strahlen, abzuschirmen. Bei Getränkeflaschen unterscheidet man nach den Transportanforderungen zwischen Mehrwegflaschen und Einwegflaschen. Mehrwegflaschen sollen nach dem Entleeren an den Abfüller zurückgeleitet und nach einer ausgiebigen Reinigung erneut befüllt werden. Solche Flaschen werden beim Kauf mit einem Flaschenpfand belegt, das verhindern soll, dass der Verbraucher aus Bequemlichkeit die Flasche dem Restmüll zuführt. Mehrwegflaschen werden meist in Getränkekisten verkauft, in denen beispielsweise 6, 11, 12, 20, 24, 25 oder 30 Flaschen stehen. Die Höhe des Mehrwegpfandes beschreibt der Artikel Flaschenpfand.
Kannen bestehen aus festen, zur Herstellung formbaren, Materialien (Keramik, Glas, Metall, Kunststoff etc.). Sie werden zur Aufbewahrung und Darreichung, gewöhnlich von Getränken, verwendet. Oben befindet sich immer eine Öffnung zum Befüllen, die bei einigen Kannen mit einem Verschlussdeckel geschlossen ist. Kannen haben meistens einen Griff (Henkel, Stiel oder Bügel) sowie eine Vorrichtung zum gezielten Entleeren (Ausguss, Loch, Schnaupe, Tülle). Der Begriff bezeichnet auch alte Flüssigkeitsmaße (in Bayern 1,07 Liter, in Thüringen, in Dresden 0,9355 Liter), bis 1884 war 'Kanne' in Deutschland amtliche Nebenbezeichnung für Liter.[1]
Der Quellcode für voriges Beispiel:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Dosen</a></li>
<li><a href="#tab2" data-toggle="tab">Flaschen</a></li>
<li><a href="#tab3" data-toggle="tab">Kannen</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Eine Dose ist eine Dose ist eine Dose....</p>
</div>
<div class="tab-pane" id="tab2">
<p>Eine Flasche ist eine Flasche ist eine Flasche...</p>
</div>
<div class="tab-pane" id="tab3">
<p>Eine Kanne ist eine Kanne ist eine Kanne...</p>
</div>
</div>
</div>
Das Tabable Tab wird in ein <div class="tabable"
> eingeschlossen
Es folgt die <ul class="nav nav-tabs"> für die einzelnen Tabs.
Das aktive li mit class="active" wie gehabt.
Die Links verweisen auf die ids für den einzelnen Inhalt und bekommen data-toggle="tab"
<a href="#tab1" data-toggle="tab>
Direkt unter die ul folgt ein <div class="tab-content">
Darin die einzelnen Divs für die Inhalte. Das Aktive bekommt zusätzlich die Klasse active
<div class="tab-pane active" id="tab1">
Man kann den Content positionieren, indem man in dem umschließenden <div class="tabable tabs-right> eine weitere Klasse für die Positionierung zuweist.
<div class="tabable tabs-left>
<div class="tabable tabs-below>
In den letzten beiden Fällen (left und below) muss man die Reihenfolge des tab-content und der ul List für die nav-tabs umkehren.
<div class="tabbable tab-below">
<div class="tab-content"> ....</div>
<ul class="nav nav-tabs"> ....</ul>
</div>