Beispiel

Umschaltbares Kontextmenü zur Anzeige von Linklisten. Interaktiv gemacht mit dem Dropdown-JavaScript-Plugin .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Aktion </a></li>  
  <li><a tabindex = "-1" href = "#" > Eine weitere Aktion </a></li>  
  <li><a tabindex = "-1" href = "#" > Etwas anderes hier </a></li>  
  <li class = "Teiler" ></li> 
  <li><a tabindex = "-1" href = "#" > Getrennter Link </a></li>  
</ul>

Markierung

Wenn Sie sich nur das Dropdown-Menü ansehen, finden Sie hier den erforderlichen HTML-Code. Sie müssen den Auslöser des Dropdown-Menüs und das Dropdown-Menü innerhalb .dropdownvon oder einem anderen Element, das deklariert, umschließen position: relative;. Dann erstellen Sie einfach das Menü.

<div class = "Dropdown" > 
  <!-- Link oder Schaltfläche zum Umschalten des Dropdown-Menüs -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Aktion </a></li>  
    <li><a tabindex = "-1" href = "#" > Eine weitere Aktion </a></li>  
    <li><a tabindex = "-1" href = "#" > Etwas anderes hier </a></li>  
    <li class = "Teiler" ></li> 
    <li><a tabindex = "-1" href = "#" > Getrennter Link </a></li>  
  </ul>
</div>

Optionen

Richten Sie Menüs rechts aus und fügen Sie zusätzliche Dropdown-Ebenen hinzu.

Menüs ausrichten

Fügen Sie .pull-rightzu a .dropdown-menuhinzu, um das Dropdown-Menü rechts auszurichten.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Deaktivierte Menüoptionen

Fügen Sie .disableda <li>in der Dropdown-Liste hinzu, um den Link zu deaktivieren.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Normaler Link </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Deaktivierter Link </a></li>   
  <li><a tabindex = "-1" href = "#" > Ein weiterer Link </a></li>  
</ul>

Untermenüs auf Dropdowns

Fügen Sie eine zusätzliche Ebene von Dropdown-Menüs hinzu, die wie die von OS X beim Hover erscheinen, mit einigen einfachen Markup-Ergänzungen. Fügen Sie .dropdown-submenubeliebige liin einem vorhandenen Dropdown-Menü für automatisches Styling hinzu.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "Dropdown-Untermenü" > 
    <a tabindex = "-1" href = "#" > Weitere Optionen </a>  
    <ul class = "Dropdown-Menü" > 
      ...
    </ul>
  </li>
</ul>

Beispiele

Zwei grundlegende Optionen, zusammen mit zwei spezifischeren Variationen.

Einzelne Schaltflächengruppe

Umschließen Sie eine Reihe von Schaltflächen mit .btnin .btn-group.

<div class = "btn-Gruppe" > 
  <button class = "btn" > Links </button> 
  <button class = "btn" > Mittel </button> 
  <button class = "btn" > Rechts </button> 
</div>

Mehrere Schaltflächengruppen

Kombinieren Sie Sätze von <div class="btn-group">zu einem <div class="btn-toolbar">für komplexere Komponenten.

<div class = "btn-toolbar" > 
  <div class = "btn-Gruppe" > 
    ...
  </div>
</div>

Vertikale Schaltflächengruppen

Lassen Sie eine Reihe von Schaltflächen vertikal statt horizontal gestapelt erscheinen.

<div class = "btn-group btn-group-vertikal" > 
  ...
</div>

Checkbox- und Radio-Aromen

Schaltflächengruppen können auch als Optionsfelder fungieren, bei denen nur eine Schaltfläche aktiv sein kann, oder als Kontrollkästchen, bei denen beliebig viele Schaltflächen aktiv sein können. Sehen Sie sich dazu die JavaScript-Dokumentation an.

Dropdowns in Schaltflächengruppen

Kopf hoch!Schaltflächen mit Dropdown-Menüs müssen für eine ordnungsgemäße Wiedergabe einzeln .btn-groupinnerhalb von umschlossen werden..btn-toolbar

Überblick und Beispiele

Verwenden Sie eine beliebige Schaltfläche, um ein Dropdown-Menü auszulösen, indem Sie es in ein platzieren .btn-groupund das richtige Menü-Markup bereitstellen.

<div class = "btn-Gruppe" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Aktion
    <span class = "caret" ></span> 
  </a>
  <ul class = "Dropdown-Menü" > 
    <!-- Dropdown-Menü-Links -->
  </ul>
</div>

Funktioniert mit allen Knopfgrößen

Schaltflächen-Dropdowns funktionieren in jeder Größe: .btn-large, .btn-small, oder .btn-mini.

Benötigt JavaScript

Schaltflächen- Dropdowns erfordern das Bootstrap-Dropdown -Plug- in, um zu funktionieren.

In einigen Fällen – wie z. B. auf Mobilgeräten – erstrecken sich Dropdown-Menüs über den Darstellungsbereich hinaus. Sie müssen die Ausrichtung manuell oder mit benutzerdefiniertem JavaScript auflösen.

Drop-downs für geteilte Schaltflächen

Aufbauend auf den Schaltflächengruppenstilen und dem Markup können wir ganz einfach eine geteilte Schaltfläche erstellen. Geteilte Schaltflächen verfügen links über eine Standardaktion und rechts über einen Dropdown-Schalter mit kontextbezogenen Links.

<div class = "btn-Gruppe" > 
  <button class = "btn" > Aktion </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "Dropdown-Menü" > 
    <!-- Dropdown-Menü-Links -->
  </ul>
</div>

Größen

Verwenden Sie die zusätzlichen Schaltflächenklassen .btn-mini, .btn-small, oder .btn-largezur Größenanpassung.

<div class = "btn-Gruppe" > 
  <button class = "btn btn-mini" > Aktion </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "Dropdown-Menü" > 
    <!-- Dropdown-Menü-Links -->
  </ul>
</div>

Dropdown-Menüs

Dropdown-Menüs können auch von unten nach oben umgeschaltet werden, indem eine einzelne Klasse zum unmittelbar übergeordneten Element von hinzugefügt wird .dropdown-menu. Es ändert die Richtung des .caretund positioniert das Menü selbst neu, um sich von unten nach oben statt von oben nach unten zu bewegen.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "Dropdown-Menü" > 
    <!-- Dropdown-Menü-Links -->
  </ul>
</div>

Lightweight-Standardwerte Gleiches Markup, unterschiedliche Klassen

Alle Navigationskomponenten hier – Registerkarten, Pillen und Listen – teilen sich das gleiche Basis-Markup und die gleichen Stile in der gesamten .navKlasse.

Grundlegende Registerkarten

Nehmen Sie regelmäßig <ul>Links und fügen Sie hinzu .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktiv" > 
    <a href = "#" > Startseite </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Basispillen

Nehmen Sie denselben HTML-Code, aber verwenden Sie .nav-pillsstattdessen:

<ul class = "nav nav-pillen" > 
  <li class = "aktiv" > 
    <a href = "#" > Startseite </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Deaktivierter Zustand

.disabledFügen Sie für jede Navigationskomponente (Registerkarten, Pillen oder Listen) graue Links und keine Hover-Effekte hinzu . Links bleiben jedoch anklickbar, es sei denn, Sie entfernen das hrefAttribut. Alternativ können Sie benutzerdefiniertes JavaScript implementieren, um diese Klicks zu verhindern.

<ul class = "nav nav-pillen" > 
  ...
  <li class = "deaktiviert" ><a href = "#" > Startseite </a></li>  
  ...
</ul>

Komponentenausrichtung

Verwenden Sie zum Ausrichten von Navigationslinks die Hilfsklassen .pull-leftoder .pull-right. Beide Klassen fügen einen CSS-Float in der angegebenen Richtung hinzu.

Stapelbar

Da Tabs und Pillen standardmäßig horizontal sind, fügen Sie einfach eine zweite Klasse hinzu, .nav-stacked, damit sie vertikal gestapelt erscheinen.

Gestapelte Registerkarten

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Gestapelte Pillen

<ul class = "nav nav-Pillen nav-gestapelt" > 
  ...
</ul>

Dropdowns

Fügen Sie Dropdown-Menüs mit etwas zusätzlichem HTML und dem Dropdown-JavaScript-Plugin hinzu .

Registerkarten mit Dropdowns

<ul class = "nav nav-tabs" > 
  <li class = "Dropdown" > 
    <a class = "Dropdown-Schalter" 
       data-toggle = "Dropdown"
       href = "#" >
        Dropdown-Liste
        <b class = "caret" ></b> 
      </a>
    <ul class = "Dropdown-Menü" > 
      <!-- Links -->
    </ul>
  </li>
</ul>

Pillen mit Dropdowns

<ul class = "nav nav-pillen" > 
  <li class = "Dropdown" > 
    <a class = "Dropdown-Schalter" 
       data-toggle = "Dropdown"
       href = "#" >
        Dropdown-Liste
        <b class = "caret" ></b> 
      </a>
    <ul class = "Dropdown-Menü" > 
      <!-- Links -->
    </ul>
  </li>
</ul>

Navigationslisten

Eine einfache Möglichkeit, Gruppen von Navigationslinks mit optionalen Headern zu erstellen. Sie werden am besten in Seitenleisten wie dem Finder in OS X verwendet.

Beispiel Navigationsliste

Nehmen Sie eine Liste von Links und fügen Sie hinzu class="nav nav-list":

<ul class = "nav nav-liste" > 
  <li class = "nav-header" > Kopfzeile der Liste </li> 
  <li class = "active" ><a href = "#" > Startseite </a></li>  
  <li><a href = "#" > Bibliothek </a></li> 
  ...
</ul>

NotizZum Verschachteln in einer Navigationsliste fügen Sie eine class="nav nav-list"beliebige verschachtelte <ul>.

Horizontale Teiler

Fügen Sie einen horizontalen Teiler hinzu, indem Sie ein leeres Listenelement mit der Klasse erstellen .divider, etwa so:

<ul class = "nav nav-liste" > 
  ...
  <li class = "Teiler" ></li> 
  ...
</ul>

Tab-Navigation

Erwecken Sie Ihre Tabs mit einem einfachen Plugin zum Leben, um zwischen Inhalten über Tabs hin- und herzuschalten. Bootstrap integriert Tabulatoren in vier Stilen: oben (Standard), rechts, unten und links.

Beispiel für Tabulatoren

Um Registerkarten tabbierbar zu machen, erstellen Sie eine .tab-panemit eindeutiger ID für jede Registerkarte und schließen Sie sie in ein .tab-content.

Ich bin in Abschnitt 1.

Hallo, ich bin in Abschnitt 2.

Was geht, Mädchen, das ist Abschnitt 3.

<div class = "tabbable" > <!-- Nur für linke/rechte Tabulatoren erforderlich -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Abschnitt 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Abschnitt 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Ich bin in Abschnitt 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hallo, ich bin in Abschnitt 2. </p>
    </div>
  </div>
</div>

Registerkarten einblenden

Um Tabulatoren einzublenden, fügen Sie .fadezu jedem hinzu .tab-pane.

Benötigt jQuery-Plugin

Alle Registerkarten mit Tabs werden von unserem leichtgewichtigen jQuery-Plugin unterstützt. Lesen Sie auf der JavaScript-Dokumentationsseite mehr darüber, wie Sie Registerkarten zum Leben erwecken können .

Tabbable in jeder Richtung

Registerkarten auf der Unterseite

Drehen Sie die Reihenfolge des HTML um und fügen Sie eine Klasse hinzu, um Tabs unten zu platzieren.

Ich bin in Abteilung A.

Hallo, ich bin in Abteilung B.

Was geht, Mädchen, das ist Abschnitt C.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Registerkarten auf der linken Seite

Tauschen Sie die Klasse aus, um Tabulatoren auf der linken Seite zu platzieren.

Ich bin in Abteilung A.

Hallo, ich bin in Abteilung B.

Was geht, Mädchen, das ist Abschnitt C.

<div class = "tabtable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Registerkarten rechts

Tauschen Sie die Klasse aus, um Tabulatoren auf der rechten Seite zu platzieren.

Ich bin in Abteilung A.

Hallo, ich bin in Abteilung B.

Was geht, Mädchen, das ist Abschnitt C.

<div class = "tabtable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Einfache Navigationsleiste

Zunächst einmal sind Navigationsleisten statisch (nicht oben fixiert) und bieten Unterstützung für einen Projektnamen und grundlegende Navigation. Platzieren Sie eines irgendwo innerhalb von .container, wodurch die Breite Ihrer Website und Ihres Inhalts festgelegt wird.

<div class = "Navigationsleiste" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titel </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Startseite </a></li>  
      <li><a href = "#" > Link </a></li> 
      <li><a href = "#" > Link </a></li> 
    </ul>
  </div>
</div>

Navbar-Komponenten

Marke

Ein einfacher Link, um Ihren Marken- oder Projektnamen anzuzeigen, erfordert nur ein Anker-Tag.

<a class = "brand" href = "#" > Projektname </a>

Navi-Links

Navigationselemente können einfach über ungeordnete Listen hinzugefügt werden.

<ul class = "nav" > 
  <li class = "aktiv" > 
    <a href = "#" > Startseite </a> 
  </li>
  <li><a href = "#" > Link </a></li> 
  <li><a href = "#" > Link </a></li> 
</ul>

Mit einem leeren Listenelement und einer einfachen Klasse können Sie Ihren Navigationslinks ganz einfach Trennlinien hinzufügen. Fügen Sie einfach dies zwischen den Links hinzu:

<ul class = "nav" > 
  ...
  <li class = "divider-vertikal" ></li> 
  ...
</ul>

Formen

Um ein Formular in der Navigationsleiste richtig zu gestalten und zu positionieren, fügen Sie die entsprechenden Klassen wie unten gezeigt hinzu. Fügen Sie für ein Standardformular .navbar-formund entweder .pull-leftoder .pull-righthinzu, um es richtig auszurichten.

<form class = "navbar-form pull-left" > 
  <Eingabetyp = "Text" Klasse = "Span2 " >  
  <button type = "submit " class = "btn" > Senden </button>  
</form>

Suchformular

Für ein individuelleres Suchformular fügen Sie .navbar-searchdas formund .search-queryzur Eingabe für spezialisierte Stile in der Navigationsleiste hinzu.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

Komponentenausrichtung

Richten Sie Navigationslinks, Suchformulare oder Texte aus, verwenden Sie die Hilfsklassen .pull-leftoder .pull-right. Beide Klassen fügen einen CSS-Float in der angegebenen Richtung hinzu.

Verwenden von Dropdowns

Fügen Sie Dropdowns und Dropdowns mit ein wenig Markup und dem Dropdown-JavaScript-Plugin zum Navigationssystem hinzu .

<ul class = "nav" > 
  <li class = "Dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Konto
      <b class = "caret" ></b> 
    </a>
    <ul class = "Dropdown-Menü" > 
      ...
    </ul>
  </li>
</ul>

Weitere Markups und Informationen zum Aufrufen von Dropdowns finden Sie in der Dokumentation zu JavaScript-Dropdowns.

Text

Umschließen Sie Textzeichenfolgen in einem Element mit .navbar-text, normalerweise auf einem <p>Tag für den richtigen Zeilenabstand und die richtige Farbe.

Optionale Anzeigevarianten

Befestigen Sie die Navigationsleiste am oberen oder unteren Rand des Ansichtsfensters mit einer zusätzlichen Klasse im äußersten Div, .navbar.

Oben fixiert

Fügen Sie .navbar-fixed-tophinzu und denken Sie daran, den verborgenen Bereich darunter zu berücksichtigen, indem Sie mindestens 40 Pixel paddingzur <body>. Stellen Sie sicher, dass Sie dies nach dem Kern-Bootstrap-CSS und vor dem optionalen responsiven CSS hinzufügen.

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

Unten fixiert

.navbar-fixed-bottomStattdessen hinzufügen .

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

Statische obere Navigationsleiste

Erstellen Sie eine Navigationsleiste in voller Breite, die mit der Seite wegscrollt, indem Sie hinzufügen .navbar-static-top. Anders als bei der .navbar-fixed-topKlasse müssen Sie bei der keine Auffüllung ändern body.

<div class = "navbar navbar-statisch-oben" > 
  ...
</div>

Responsive Navigationsleiste

Um eine einklappbare responsive Navigationsleiste zu implementieren, packen Sie den Inhalt Ihrer Navigationsleiste in ein enthaltendes div, .nav-collapse.collapse, und fügen Sie die Schaltfläche zum Umschalten der Navigationsleiste hinzu, .btn-navbar.

<div class = "Navigationsleiste" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar wird als Umschalter für reduzierten Inhalt der Navigationsleiste verwendet -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Stellen Sie sicher, dass Sie die Marke draußen lassen, wenn Sie möchten, dass sie angezeigt wird -->
      <a class = "brand" href = "#" > Projektname </a>  
 
      <!-- Alles, was Sie bei 940px oder weniger verstecken wollen, platzieren Sie hier -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-Suche, .navbar-Formular usw. -->
      </div>
 
    </div>
  </div>
</div>

Kopf hoch! Die responsive Navigationsleiste erfordert das Collapse -Plug-in und die responsive Bootstrap-CSS-Datei .

Umgekehrte Variante

Ändern Sie das Aussehen der Navigationsleiste, indem Sie hinzufügen .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Beispiele

Es wird ein einzelnes Beispiel gezeigt, wie es auf mehreren Seiten angezeigt werden könnte.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Startseite </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Bibliothek </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Daten </li> 
</ul>

Standard-Paginierung

Einfache Paginierung, inspiriert von Rdio, ideal für Apps und Suchergebnisse. Der große Block ist kaum zu übersehen, einfach skalierbar und bietet große Klickflächen.

<div class = "Seitenumbruch" > 
  <ul>
    <li><a href = "#" > Zurück </a></li> 
    <li><a href = "#" > 1 </a></li> 
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li><a href = "#" > Weiter </a></li> 
  </ul>
</div>

Optionen

Deaktivierte und aktive Zustände

Links sind für verschiedene Umstände anpassbar. Verwenden Sie .disabledfür nicht anklickbare Links und .activeum die aktuelle Seite anzuzeigen.

<div class = "Seitenumbruch" > 
  <ul>
    <li class = "deaktiviert" ><a href = "#" > « </a></li>  
    <li class = "aktiv" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Sie können optional aktive oder deaktivierte Anker gegen Spannen austauschen, um die Klickfunktionalität zu entfernen, während die beabsichtigten Stile beibehalten werden.

<div class = "Seitenumbruch" > 
  <ul>
    <li class = "deaktiviert" ><span> « </span></li> 
    <li class = "aktiv" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Größen

Lust auf größere oder kleinere Paginierung? Fügen Sie .pagination-large, .pagination-small, oder .pagination-minifür weitere Größen hinzu.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "Seitenumbruch" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Ausrichtung

Fügen Sie eine von zwei optionalen Klassen hinzu, um die Ausrichtung von Paginierungslinks zu ändern: .pagination-centeredund .pagination-right.

<div class = "pagination paginierungszentriert" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

Pager

Schnelle vorherige und nächste Links für einfache Paginierungsimplementierungen mit leichtem Markup und Stilen. Es eignet sich hervorragend für einfache Websites wie Blogs oder Zeitschriften.

Standardbeispiel

Standardmäßig zentriert der Pager Links.

<ul class = "Pager" > 
  <li><a href = "#" > Zurück </a></li> 
  <li><a href = "#" > Weiter </a></li> 
</ul>

Ausgerichtete Links

Alternativ können Sie jeden Link an den Seiten ausrichten:

<ul class = "Pager" > 
  <li class = "vorherige" > 
    <a href = "#" > ← Ältere </a> 
  </li>
  <li class = "weiter" > 
    <a href = "#" > Neuere → </a> 
  </li>
</ul>

Optionaler deaktivierter Zustand

Pager-Links verwenden auch die allgemeine .disabledUtility-Klasse aus der Paginierung.

<ul class = "Pager" > 
  <li class = "zuvor deaktiviert" > 
    <a href = "#" > ← Ältere </a> 
  </li>
  ...
</ul>

Etiketten

Etiketten	Markierung
Standard	`<span class="label">Default</span>`
Erfolg	`<span class="label label-success">Success</span>`
Warnung	`<span class="label label-warning">Warning</span>`
Wichtig	`<span class="label label-important">Important</span>`
Die Info	`<span class="label label-info">Info</span>`
Umgekehrt	`<span class="label label-inverse">Inverse</span>`

Abzeichen

Name	Beispiel	Markierung
Standard	1	`<span class="badge">1</span>`
Erfolg	2	`<span class="badge badge-success">2</span>`
Warnung	4	`<span class="badge badge-warning">4</span>`
Wichtig	6	`<span class="badge badge-important">6</span>`
Die Info	8	`<span class="badge badge-info">8</span>`
Umgekehrt	10	`<span class="badge badge-inverse">10</span>`

Leicht zusammenklappbar

Für eine einfache Implementierung werden Labels und Badges (über den CSS- :emptySelektor) einfach reduziert, wenn darin kein Inhalt vorhanden ist.

Heldeneinheit

Eine leichte, flexible Komponente, um wichtige Inhalte auf Ihrer Website zu präsentieren. Es funktioniert gut auf Marketing- und inhaltsintensiven Websites.

Hallo Welt!

Dies ist eine einfache Heldeneinheit, eine einfache Komponente im Jumbotron-Stil, um besondere Aufmerksamkeit auf bestimmte Inhalte oder Informationen zu lenken.

Mehr erfahren

<div class = "heldeneinheit" > 
  <h1> Überschrift </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primär btn-groß" > 
      Mehr erfahren
    </a>
  </p>
</div>

Kopfzeile

Eine einfache Shell h1zum angemessenen Platzieren und Segmentieren von Inhaltsabschnitten auf einer Seite. Es kann das h1Standardelement smallvon sowie die meisten anderen Komponenten (mit zusätzlichen Stilen) verwenden.

<div class = "Seitenkopf" > 
  <h1> Beispielseitenkopf <small> Subtext für Kopfzeile </small></h1>
</div>

Standard-Thumbnails

Standardmäßig sind die Miniaturansichten von Bootstrap so konzipiert, dass sie verknüpfte Bilder mit minimal erforderlichem Markup anzeigen.

Hochgradig anpassbar

Mit ein wenig zusätzlichem Markup ist es möglich, jede Art von HTML-Inhalt wie Überschriften, Absätze oder Schaltflächen in Miniaturansichten einzufügen.

Thumbnail-Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bei eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Aktion Aktion
Thumbnail-Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bei eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Aktion Aktion
Thumbnail-Label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida bei eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Aktion Aktion

Warum Thumbnails verwenden?

Miniaturansichten (früher .media-gridbis v1.4) eignen sich hervorragend für Raster von Fotos oder Videos, Bildersuchergebnisse, Einzelhandelsprodukte, Portfolios und vieles mehr. Dies können Links oder statische Inhalte sein.

Einfaches, flexibles Markup

Thumbnail-Markup ist einfach – ein ulmit einer beliebigen Anzahl von liElementen ist alles, was erforderlich ist. Es ist auch super flexibel und ermöglicht jede Art von Inhalt mit nur ein bisschen mehr Markup, um Ihre Inhalte zu verpacken.

Verwendet Rasterspaltengrößen

Schließlich verwendet die Thumbnails-Komponente vorhandene Rastersystemklassen – wie .span2oder .span3– zur Steuerung der Thumbnail-Abmessungen.

Markierung

Wie bereits erwähnt, ist das erforderliche Markup für Miniaturansichten leicht und unkompliziert. Hier ist ein Blick auf die Standardeinstellungen für verknüpfte Bilder :

<ul class = "Miniaturansichten" > 
  <li class = "span4" > 
    <a href = "#" class = "miniaturbild" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Bei benutzerdefinierten HTML-Inhalten in Miniaturansichten ändert sich das Markup geringfügig. Um Inhalte auf Blockebene überall zuzulassen, tauschen wir das <a>gegen ein <div>Like aus:

<ul class = "Miniaturansichten" > 
  <li class = "span4" > 
    <div class = "miniaturbild" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Thumbnail-Label </h3>
      <p> Miniaturbildbeschriftung... </p>
    </div>
  </li>
  ...
</ul>

Mehr Beispiele

Erkunden Sie alle Ihre Optionen mit den verschiedenen Rasterklassen, die Ihnen zur Verfügung stehen. Sie können auch verschiedene Größen mischen und anpassen.

Standardwarnung

Fügen Sie einen beliebigen Text und eine optionale Schaltfläche zum Schließen ein, .alertum eine einfache Warnmeldung zu erhalten.

Warnung! Überprüfe am besten dich selbst, du siehst nicht allzu gut aus.

<div class = "Alarm" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <strong> Warnung! </strong> Überprüfe am besten dich selbst, du siehst nicht besonders gut aus.
</div>

Schaltflächen schließen

data-dismiss="alert"Mobile Safari- und Mobile Opera-Browser erfordern zusätzlich zum Attribut ein href="#"für das Ablehnen von Warnungen, wenn ein <a>Tag verwendet wird.

<a href = "#" class = "close" data-dismiss = "alert" > × </a>

Alternativ können Sie ein <button>Element mit dem Datenattribut verwenden, wofür wir uns für unsere Dokumente entschieden haben. Wenn Sie verwenden <button>, müssen Sie einschließen type="button"oder Ihre Formulare werden möglicherweise nicht gesendet.

<button type = "button" class = "close" data-dismiss = "alert" > × </button>

Warnungen über JavaScript schließen

Verwenden Sie das jQuery-Plugin für Warnungen, um Warnungen schnell und einfach abzulehnen.

Optionen

Erhöhen Sie bei längeren Nachrichten den Abstand oben und unten im Warnungs-Wrapper, indem Sie .alert-block.

Warnung!

Überprüfe am besten dich selbst, du siehst nicht allzu gut aus. Nulla vitae elit libero, ein pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alert alarm-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> Warnung! </h4>
  Überprüfe am besten dich selbst, du bist nicht...
</div>

Kontextuelle Alternativen

Fügen Sie optionale Klassen hinzu, um die Konnotation einer Warnung zu ändern.

Fehler oder Gefahr

Oh verdammt! Ändern Sie ein paar Dinge und versuchen Sie es erneut.

<div class = "alert alarm-error" > 
  ...
</div>

Erfolg

Gut erledigt! Sie haben diese wichtige Warnmeldung erfolgreich gelesen.

<div class = "alert alert-success" > 
  ...
</div>

Information

Kopf hoch! Diese Warnung erfordert Ihre Aufmerksamkeit, ist aber nicht besonders wichtig.

<div class = "alert alert-info" > 
  ...
</div>

Beispiele und Markup

Basic

Standard-Fortschrittsbalken mit vertikalem Farbverlauf.

<div class = "fortschritt" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

Gestreift

Verwendet einen Farbverlauf, um einen Streifeneffekt zu erzeugen. Nicht verfügbar in IE7-8.

<div class = "fortschritt fortschritt-gestreift" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

Animiert

Fügen Sie hinzu .active, .progress-stripedum die Streifen von rechts nach links zu animieren. Nicht in allen IE-Versionen verfügbar.

<div class = "fortschritt progress-gestreift aktiv" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

Gestapelt

Legen Sie mehrere Riegel in denselben .progress, um sie zu stapeln.

<div class = "fortschritt" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

Optionen

Zusätzliche Farben

Fortschrittsbalken verwenden einige der gleichen Schaltflächen- und Warnungsklassen für konsistente Stile.

<div class = "fortschritt fortschrittsinfo" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "Fortschritt Fortschritt-Erfolg" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "Fortschritt Fortschrittswarnung" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "fortschritt fortschrittsgefahr" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Gestreifte Balken

Ähnlich wie bei den Volltonfarben haben wir verschiedene gestreifte Fortschrittsbalken.

<div class = "Fortschritt Fortschrittsinfo Fortschrittsstreifen" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "Fortschritt Fortschritt-Erfolg Fortschritt-gestreift" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "Fortschritt Fortschrittswarnung Fortschrittsstreifen" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "fortschritt fortschritt-gefahr fortschritt-gestreift" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

Browserunterstützung

Fortschrittsbalken verwenden CSS3-Verläufe, Übergänge und Animationen, um all ihre Effekte zu erzielen. Diese Funktionen werden in IE7-9 oder älteren Versionen von Firefox nicht unterstützt.

Versionen vor Internet Explorer 10 und Opera 12 unterstützen keine Animationen.

Abstrakte Objektstile zum Erstellen verschiedener Arten von Komponenten (wie Blogkommentare, Tweets usw.), die neben Textinhalten ein links- oder rechtsbündiges Bild enthalten.

Standardbeispiel

Die Standardmedien ermöglichen es, ein Medienobjekt (Bilder, Video, Audio) links oder rechts von einem Inhaltsblock schweben zu lassen.

Überschrift Medien

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, Vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Überschrift Medien

<div class = "media" > 
  <a class = "nach links ziehen" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Medienüberschrift </h4> 
    ...
 
    <!-- Verschachteltes Medienobjekt -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Medienliste

Mit ein wenig zusätzlichem Markup können Sie Medien in Listen verwenden (nützlich für Kommentar-Threads oder Artikellisten).

Überschrift Medien

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, Vestibulum in vulputate at, tempus viverra turpis.

Verschachtelte Medienüberschrift
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, Vestibulum in vulputate at, tempus viverra turpis.

Verschachtelte Medienüberschrift
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, Vestibulum in vulputate at, tempus viverra turpis.

Verschachtelte Medienüberschrift
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, Vestibulum in vulputate at, tempus viverra turpis.
Überschrift Medien
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, Vestibulum in vulputate at, tempus viverra turpis.

<ul class = "media-list" > 
  <li class = "Medien" > 
    <a class = "nach links ziehen" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Medienüberschrift </h4> 
      ...
 
      <!-- Verschachteltes Medienobjekt -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Brunnen

Verwenden Sie den Brunnen als einfachen Effekt für ein Element, um ihm einen Einfügungseffekt zu verleihen.

Schau, ich bin in einem Brunnen!

<div class = "gut" > 
  ...
</div>

Optionale Klassen

Steuerpolsterung und abgerundete Ecken mit zwei optionalen Modifikatorklassen.

Schau, ich bin in einem Brunnen!

<div class = "well well-large" > 
  ...
</div>

Schau, ich bin in einem Brunnen!

<div class = "gut gut-klein" > 
  ...
</div>

Schließen-Symbol

Verwenden Sie das generische Schließen-Symbol, um Inhalte wie Modale und Warnungen zu verwerfen.

<button class = "close" > × </button>

iOS-Geräte erfordern ein href="#"for click-Ereignis, wenn Sie lieber einen Anker verwenden möchten.

<a class = "close" href = "#" > × </a>

Helfer Klassen

Einfache, fokussierte Klassen für kleine Anzeige- oder Verhaltensänderungen.

.nach links ziehen

Schweben Sie ein Element nach links

class = "nach links ziehen"

. ziehen - links {
  Schwimmer : links ;
}

.nach rechts ziehen

Lassen Sie ein Element nach rechts schweben

class = "nach rechts ziehen"

. ziehen - rechts {
  Schwimmer : rechts ;
}

.stummgeschaltet

Ändern Sie die Farbe eines Elements in#999

class = "stumm"

. stummgeschaltet {
  Farbe : #999; 
}

.clearfix

Deaktivieren Sie das floatauf jedem Element

class = "clearfix"

. löschen {
  * Zoom : 1 ; 
  &: vor ,
  &: nach {
    Anzeige : Tabelle ;
    Inhalt : "" ; 
  }
  &: nach {
    klar : beides ;
  }
}

Dropdown-Menüs

Beispiel

Markierung

Optionen

Menüs ausrichten

Deaktivierte Menüoptionen

Untermenüs auf Dropdowns

Schaltflächengruppen

Beispiele

Einzelne Schaltflächengruppe

Mehrere Schaltflächengruppen

Vertikale Schaltflächengruppen

Checkbox- und Radio-Aromen

Dropdowns in Schaltflächengruppen

Schaltflächen-Dropdown-Menüs

Überblick und Beispiele

Funktioniert mit allen Knopfgrößen

Benötigt JavaScript

Drop-downs für geteilte Schaltflächen

Größen

Dropdown-Menüs

Nav: Registerkarten, Pillen und Listen

Lightweight-Standardwerte Gleiches Markup, unterschiedliche Klassen

Grundlegende Registerkarten

Basispillen

Deaktivierter Zustand

Komponentenausrichtung

Stapelbar

Gestapelte Registerkarten

Gestapelte Pillen

Dropdowns

Registerkarten mit Dropdowns

Pillen mit Dropdowns

Navigationslisten

Beispiel Navigationsliste

Horizontale Teiler

Tab-Navigation

Beispiel für Tabulatoren

Registerkarten einblenden

Benötigt jQuery-Plugin

Tabbable in jeder Richtung

Registerkarten auf der Unterseite

Registerkarten auf der linken Seite

Registerkarten rechts

Navigationsleiste

Einfache Navigationsleiste

Navbar-Komponenten

Marke

Navi-Links

Formen

Suchformular

Komponentenausrichtung

Verwenden von Dropdowns

Text

Optionale Anzeigevarianten

Oben fixiert

Unten fixiert

Statische obere Navigationsleiste

Responsive Navigationsleiste

Umgekehrte Variante

Semmelbrösel

Beispiele

Paginierung Zwei Optionen zum Blättern durch Inhalte

Standard-Paginierung

Optionen

Deaktivierte und aktive Zustände

Größen

Ausrichtung

Pager

Standardbeispiel

Ausgerichtete Links

Optionaler deaktivierter Zustand

Etiketten und Abzeichen

Etiketten

Abzeichen

Leicht zusammenklappbar

Typografische Komponenten

Heldeneinheit

Hallo Welt!

Kopfzeile