Bootstrap Navigationselemente
In diesem Kapitel erklären wir einige Optionen, die Bootstrap zur Definition von Navigationselementen bereitstellt. Sie verwenden dasselbe Markup und die Basisklasse.nav. Bootstrap stellt außerdem eine Hilfsklasse zum Teilen von Markup und Zuständen bereit. Durch Ändern der Modifikatorklasse können Sie zwischen verschiedenen Stilen wechseln.
Tabellennavigation oder Tabs
So erstellen Sie ein Navigationsmenü im Tab-Stil:
- Beginnen Sie mit einer ungeordneten Liste mit der Klasse.nav. Fügen Sie die Klasse hinzu:
- Fügen Sie die Klasse.nav-tabs。
Das folgende Beispiel demonstriert dies:
Beispiel
Ausprobieren »
Das Ergebnis ist wie folgt:
Pills-Navigationsmenü
Einfaches Pills-Navigationsmenü
Wenn Sie Tabs in den Pills-Stil ändern möchten, verwenden Sie einfach die Klasse.nav-pillsanstelle von.nav-tabs. Die übrigen Schritte sind dieselben wie oben.
Das folgende Beispiel demonstriert dies:
Beispiel
Ausprobieren »
Das Ergebnis ist wie folgt:
Vertikales Pills-Navigationsmenü
Sie können die Klassen.nav, .nav-pillszusammen mit der Klasse.nav-stackedverwenden, damit die Pills untereinander gestapelt werden.
Das folgende Beispiel demonstriert dies:
Beispiel
Ausprobieren »
Das Ergebnis ist wie folgt:
Ausgerichtete Navigation
Wenn die Bildschirmbreite größer als 768px ist, können Sie die Klassen.nav, .nav-tabsbzw..nav, .nav-pillszusammen mit der Klasse.nav-justified verwenden,damit das Navigationsmenü im Tab-Stil oder Pills-Stil die volle Breite des Elternelements einnimmt. Auf kleineren Bildschirmen werden die Navigationslinks gestapelt.
Das folgende Beispiel demonstriert dies:
Beispiel
Ausprobieren »
Das Ergebnis ist wie folgt:
Deaktivierte Links
Für jede.nav-Klasse wird durch das Hinzufügen der Klasse.disabledein grauer Link erstellt, und der:hover-Zustand des Links ist deaktiviert, wie im folgenden Beispiel gezeigt:
Beispiel
Ausprobieren »
Das Ergebnis ist wie folgt:
Diese Klasse ändert nur das Aussehen von <a>, nicht jedoch dessen Funktionalität. Hier müssen Sie benutzerdefiniertes JavaScript verwenden, um die Links zu deaktivieren.
Dropdown-Menüs
Navigationsmenüs verwenden eine ähnliche Syntax wie Dropdown-Menüs. Standardmäßig arbeiten die Anker von Listenelementen mit einigen Datenattributen zusammen, um eine ungeordnete Liste mit der Klasse.dropdown-menuauszulösen.
Tabs mit Dropdown-Menü
Die Schritte zum Hinzufügen eines Dropdown-Menüs zu Tabs sind wie folgt:
- Beginnen Sie mit einer ungeordneten Liste mit der Klasse.nav. Fügen Sie die Klasse hinzu:
- Fügen Sie eine ungeordnete Liste mit.nav-tabs hinzu.。
- class..dropdown-menuBeispiel
Beispiel
Das Ergebnis ist wie folgt:
Pills mit Dropdown-Menü
Pills mit Dropdown-Menü
Sie müssen lediglich.nav-tabszuändern, wie im folgenden Beispiel gezeigt:, as shown in the example below:
Beispiel
Ausprobieren »
Das Ergebnis ist wie folgt:
Weitere Beispiele für Navigationselemente
Tabs und Pill-Tabs
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| .nav nav-tabs | Tabs | Ausprobieren |
| .nav nav-pills | Pills | Ausprobieren |
| .nav nav-pills nav-stacked | Vertikal gestapelte Pills | Ausprobieren |
| .nav-justified | Ausgerichtete Tabs: Auf Bildschirmen, die größer als 768px sind, sorgt die Klasse .nav-justified dafür, dass Tabs oder Pills eine gleichmäßige Breite haben. Auf kleinen Bildschirmen werden die Navigationslinks untereinander gestapelt. | Ausprobieren |
| .disabled | Deaktivierte Tabs | Ausprobieren |
| Tabs mit Dropdown-Menüs | Ausprobieren | |
| Pills mit Dropdown-Menüs | Ausprobieren | |
| .tab-content | Wird mit .tab-pane und data-toggle="tab" (data-toggle="pill") verwendet, damit sich der entsprechende Tab-Inhalt beim Umschalten der Tabs ändert. | Ausprobieren |
| .tab-pane | Wird mit .tab-content und data-toggle="tab" (data-toggle="pill") verwendet, damit sich der entsprechende Tab-Inhalt beim Umschalten der Tabs ändert. | Ausprobieren |