Komponenten

Dutzende wiederverwendbare Komponenten sind in Bootstrap integriert, um Navigation, Warnungen, Popover und vieles mehr bereitzustellen.

Schaltflächengruppen

Verwenden Sie Schaltflächengruppen, um mehrere Schaltflächen zu einer zusammengesetzten Komponente zusammenzufügen. Bauen Sie sie mit einer Reihe von <a>oder - <button>Elementen auf.

Empfohlene Vorgehensweise

Wir empfehlen die folgenden Richtlinien für die Verwendung von Schaltflächengruppen und Symbolleisten:

Verwenden Sie immer dasselbe Element in einer einzelnen Schaltflächengruppe, <a>oder <button>.
Mischen Sie keine Knöpfe mit unterschiedlichen Farben in derselben Knopfgruppe.
Verwenden Sie Symbole zusätzlich zu oder anstelle von Text, aber stellen Sie sicher, dass Sie gegebenenfalls Alt- und Titeltext enthalten.

Zugehörige Schaltflächengruppen mit Dropdowns (siehe unten) sollten separat aufgerufen werden und immer ein Dropdown-Cursor enthalten, um das beabsichtigte Verhalten anzuzeigen.

Standardbeispiel

So sieht der HTML-Code für eine Standard-Schaltflächengruppe aus, die mit Anker-Tag-Schaltflächen erstellt wurde:

<div class = "btn-Gruppe" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Beispiel Symbolleiste

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>

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.

Holen Sie sich das Javascript »

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

Schaltflächen-Dropdowns

Ü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.

Beispiel-Markup

Ähnlich wie eine Schaltflächengruppe verwendet unser Markup normales Schaltflächen-Markup, jedoch mit einer Handvoll Zusätzen, um den Stil zu verfeinern und das Dropdown-jQuery-Plug-in von Bootstrap zu unterstützen.

<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. Ihre Knopfgrößen zu .btn-large, .btn-small, oder .btn-mini.

Erfordert 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

Überblick und Beispiele

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.

Größen

Verwenden Sie die zusätzliche Schaltflächenklasse .btn-mini, .btn-small, oder .btn-largefür die Größenanpassung.

<div class = "btn-Gruppe" > 
  ...
  <ul class = "Dropdown-Menü nach rechts ziehen" > 
    <!-- Dropdown-Menü-Links -->
  </ul>
</div>

Beispiel-Markup

Wir erweitern die normalen Schaltflächen-Dropdowns, um eine zweite Schaltflächenaktion bereitzustellen, die als separater Dropdown-Trigger fungiert.

<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>

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

Leistungsstarke Basisklasse

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

Wann verwenden

Registerkarten und Pillen eignen sich hervorragend für Inhaltsabschnitte oder zum Navigieren zwischen Seiten mit verwandten Inhalten.

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.

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>

Stapelbar Machen Sie Tabs oder Pillen vertikal

Wie man sie stapelt

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ür erweiterte Navigationskomponenten

Reichhaltige Menüs leicht gemacht

Dropdown-Menüs in Bootstrap-Tabs und -Pillen sind super einfach und erfordern nur ein wenig zusätzlichen HTML-Code und ein leichtes jQuery-Plugin.

Gehen Sie zur Javascript-Seite, um die Dokumentation zum Initialisieren von Dropdowns in Bootstrap zu lesen.

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 Erstellen Sie einfache gestapelte Navigationslisten, die sich hervorragend für Seitenleisten eignen

Navigation im Anwendungsstil

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

Strukturell basieren sie auf den gleichen zentralen Navigationsstilen wie Registerkarten und Pillen, sodass die Verwendung und Anpassung unkompliziert sind.

Mit Ikonen

Auch Navigationslisten lassen sich einfach mit Symbolen ausstatten. Fügen Sie das richtige <i>Tag mit Klasse hinzu und Sie sind fertig.

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-list" > 
  ...
  <li class = "Teiler" ></li> 
  ...
</ul>

Beispiel Navigationsliste

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

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

Beispiel mit Symbolen

Gleiches Beispiel, aber mit <i>Tags für Icons.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      Bibliothek
    </a>
  </li>
  ...
</ul>

Tab-Navigation Erwecken Sie Tabs über Javascript zum Leben

Was ist inbegriffen

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.

Der Wechsel zwischen ihnen ist einfach und erfordert nur eine sehr geringe Änderung des Markups.

Beispiel für Tabulatoren

Um Tabs tabbierbar zu machen, umschließen Sie das .nav-tabsin einem anderen div mit class .tabbable.

Ich bin in Abschnitt 1.

Hallo, ich bin in Abschnitt 2.

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

Benutzerdefiniertes jQuery-Plugin

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

Holen Sie sich das Javascript →

Einfaches Markup

Die Verwendung von Registerkarten mit Tabulatoren erfordert ein umschließendes Div, eine Reihe von Registerkarten und eine Reihe von Inhaltsbereichen mit Tabulatoren.

<div class = "tabbelbar" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Abschnitt 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Abschnitt 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Ich bin in Abschnitt 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Hallo, ich bin in Abschnitt 2. </p>
    </div>
  </div>
</div>

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>

Beispiel für eine statische Navigationsleiste

Ein Beispiel für eine statische (nicht oben fixierte) Navigationsleiste mit Projektname, Navigation und Suchformular.

Navbar-Gerüst

Die Navigationsleiste benötigt nur wenige Divs, um sie gut für die statische oder feste Anzeige zu strukturieren.

<div class = "Navigationsleiste" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Navigationsleiste behoben

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

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

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

Denken Sie beim Anbringen der Navigationsleiste daran, den darunter liegenden verdeckten Bereich zu berücksichtigen. Fügen Sie 40 Pixel oder mehr apdding zur <body>. Stellen Sie sicher, dass Sie dies nach dem Kern-Bootstrap-CSS und vor dem optionalen responsiven CSS hinzufügen.

Markenname

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

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

Formulare in der Navigationsleiste

Um ein Formular richtig in der Navigationsleiste 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 " >  
</form>

Fügen Sie für ein individuelleres Suchformular die .navbar-searchKlasse hinzu, um spezielle Stile in der Navigationsleiste zu erhalten.

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

Optionale responsive Variante

Abhängig von der Menge an Inhalten in Ihrer Topbar möchten Sie möglicherweise die Responsive-Optionen implementieren. Wickeln Sie dazu Ihren Navigationsinhalt in ein enthaltendes div ein, .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 mit 940px oder weniger verstecken wollen, platzieren Sie hier -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-Suche, .navbar-Formular usw. -->
      </div>
 
    </div>
  </div>
</div>

Kopf hoch! Für die responsive Navigationsleiste ist das Collapse -Plug-in erforderlich .

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>

Komponentenausrichtung

Um eine Navigation, ein Suchformular oder einen Text auszurichten, verwenden Sie die Hilfsklassen .pull-leftoder .pull-right. Beide Klassen fügen einen CSS-Float in der angegebenen Richtung hinzu.

Dropdown-Menüs hinzufügen

Das Hinzufügen von Dropdowns und Dropdowns zum Navigationssystem ist super einfach, erfordert jedoch die Verwendung unseres Javascript-Plugins .

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

Holen Sie sich das Javascript →

Text in der Navigationsleiste

Umschließen Sie Textzeichenfolgen in einem <p>Tag, um den richtigen Zeilenabstand und die richtige Farbe zu erhalten.

Warum sie verwenden

Die Breadcrumb-Navigation wird verwendet, um Benutzern zu zeigen, wo sie sich innerhalb einer App oder einer Website befinden, aber nicht für die primäre Navigation. Halten Sie ihre Verwendung spärlich und prägnant, um am effektivsten zu sein.

Beispiele

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

Markierung

HTML ist Ihre standardmäßige ungeordnete Liste mit Links.

<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>

Multicon-Seiten-Paginierung

Wann verwenden

Ultra-einfache und minimal gestylte 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.

Zustandsbehaftete Seitenlinks

Links sind anpassbar und funktionieren unter einer Reihe von Umständen mit der richtigen Klasse. .disabledfür nicht klickbare Links und .activefür die aktuelle Seite.

Flexible Ausrichtung

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

Beispiele

Die Standard-Paginierungskomponente ist flexibel und funktioniert in einer Reihe von Variationen.

Markierung

Eingehüllt in eine <div>Paginierung ist nur eine <ul>.

<div class = "Seitenumbruch" > 
  <ul>
    <li><a href = "#" > Zurück </a></li> 
    <li class = "aktiv" > 
      <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 = "#" > Weiter </a></li> 
  </ul>
</div>

Pager Für schnelle vorherige und nächste Links

Über Pager

Die Pager-Komponente ist eine Reihe von Links für einfache Paginierungsimplementierungen mit leichtem Markup und noch leichteren Stilen. Es eignet sich hervorragend für einfache Websites wie Blogs oder Zeitschriften.

Optionaler deaktivierter Zustand

Pager-Links verwenden auch die allgemeine .disabledKlasse aus der Paginierung.

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>

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>`

Um

Abzeichen sind kleine, einfache Komponenten zum Anzeigen eines Indikators oder einer Art Zählung. Sie sind häufig in E-Mail-Clients wie Mail.app oder in mobilen Apps für Push-Benachrichtigungen zu finden.

Verfügbare Klassen

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>`
Fehler	6	`<span class="badge badge-error">6</span>`
Die Info	8	`<span class="badge badge-info">8</span>`
Umgekehrt	10	`<span class="badge badge-inverse">10</span>`

Heldeneinheit

Bootstrap bietet eine leichte, flexible Komponente namens Hero Unit, um Inhalte auf Ihrer Website zu präsentieren. Es funktioniert gut auf Marketing- und inhaltsintensiven Websites.

Markierung

Wickeln Sie Ihren Inhalt divso ein:

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

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

Kopfzeile

Eine einfache Shell h1zum angemessenen Verteilen 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 </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

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.

Das Markup

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 = "span3" > 
    <a href = "#" class = "miniaturbild" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "miniaturbild" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Thumbnail-Label </h5>
      <p> Miniaturbildbeschriftung hier... </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.

Leichte Standardeinstellungen

Umgeschriebene Basisklasse

Mit Bootstrap 2 haben wir die Basisklasse vereinfacht: .alertAnstelle von .alert-message. Wir haben auch das minimal erforderliche Markup reduziert <p>– standardmäßig ist no erforderlich, nur das äußere <div>.

Einzelne Warnmeldung

Für eine haltbarere Komponente mit weniger Code haben wir das differenzierende Aussehen für Blockwarnungen entfernt, Nachrichten, die mit mehr Polsterung und normalerweise mehr Text versehen sind. Die Klasse hat sich auch geändert zu .alert-block.

Geht super mit Javascript

Bootstrap wird mit einem großartigen jQuery-Plug-in geliefert, das Warnmeldungen unterstützt, sodass sie schnell und einfach verworfen werden können.

Holen Sie sich das Plugin »

Beispielwarnungen

Verpacken Sie Ihre Nachricht und ein optionales Schließen-Symbol in einem div mit einfacher Klasse.

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

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

Erweitern Sie die Standardwarnmeldung einfach um zwei optionale Klassen: .alert-blockfür mehr Auffüllung und Textsteuerelemente und .alert-headingfür eine passende Überschrift.

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" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <h4 class = "alert-heading" > Warnung! </h4> 
  Überprüfe am besten dich selbst, du bist nicht...
</div>

Kontextbezogene 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 alarm-info" > 
  ...
</div>

Beispiele und Markups

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 (kein IE).

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

Animiert

Nimmt das gestreifte Beispiel und animiert es (kein IE).

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

Optionen und Browserunterstützung

Zusätzliche Farben

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

Gestreifte Balken

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

Verhalten

Fortschrittsbalken verwenden CSS3-Übergänge. Wenn Sie also die Breite dynamisch über Javascript anpassen, wird die Größe reibungslos angepasst.

Wenn Sie die .activeKlasse verwenden, werden Ihre .progress-stripedFortschrittsbalken die Streifen von links nach rechts animieren.

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.

Opera und IE unterstützen derzeit keine Animationen.

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>

Schließen-Symbol

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

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

Schaltflächengruppen Verbinden Sie Schaltflächen für weitere funktionsleistenähnliche Funktionen

Schaltflächengruppen

Empfohlene Vorgehensweise

Standardbeispiel

Beispiel Symbolleiste

Checkbox- und Radio-Aromen

Dropdowns in Schaltflächengruppen

Schaltflächen-Dropdown-Menüs Auf Schaltflächengruppen aufgebaut, um Kontextmenüs bereitzustellen

Schaltflächen-Dropdowns

Überblick und Beispiele

Beispiel-Markup

Funktioniert mit allen Knopfgrößen

Erfordert Javascript

Drop-downs für geteilte Schaltflächen

Überblick und Beispiele

Größen

Beispiel-Markup

Dropdown-Menüs

Navigation , Registerkarten und Pillen Hochgradig anpassbare Navigation im Listenstil

Lightweight-Standardwerte Gleiches Markup, unterschiedliche Klassen

Leistungsstarke Basisklasse

Wann verwenden

Komponentenausrichtung

Grundlegende Registerkarten

Basispillen

Stapelbar Machen Sie Tabs oder Pillen vertikal

Wie man sie stapelt

Gestapelte Registerkarten

Gestapelte Pillen

Dropdowns Für erweiterte Navigationskomponenten

Reichhaltige Menüs leicht gemacht

Registerkarten mit Dropdowns

Pillen mit Dropdowns

Navigationslisten Erstellen Sie einfache gestapelte Navigationslisten, die sich hervorragend für Seitenleisten eignen

Navigation im Anwendungsstil

Mit Ikonen

Horizontale Teiler

Beispiel Navigationsliste

Beispiel mit Symbolen

Tab-Navigation Erwecken Sie Tabs über Javascript zum Leben

Was ist inbegriffen

Beispiel für Tabulatoren

Benutzerdefiniertes jQuery-Plugin

Einfaches Markup

Tabbable in jeder Richtung

Registerkarten auf der Unterseite

Registerkarten auf der linken Seite

Registerkarten rechts

Navigationsleiste

Beispiel für eine statische Navigationsleiste

Navbar-Gerüst

Navigationsleiste behoben

Markenname

Formulare in der Navigationsleiste

Optionale responsive Variante

Navi-Links

Komponentenausrichtung

Dropdown-Menüs hinzufügen

Text in der Navigationsleiste

Semmelbrösel

Warum sie verwenden

Beispiele

Markierung

Paginierung Zwei Optionen zum Blättern durch Inhalte

Multicon-Seiten-Paginierung

Wann verwenden

Zustandsbehaftete Seitenlinks

Flexible Ausrichtung

Beispiele

Markierung

Pager Für schnelle vorherige und nächste Links

Über Pager

Optionaler deaktivierter Zustand

Standardbeispiel

Ausgerichtete Links

Inline-Beschriftungen Beschriften und kommentieren Sie Text

Abzeichen Indikatoren und ungelesene Zählungen

Um

Verfügbare Klassen

Typografische Komponenten Seitenkopf und Hero-Unit zur Segmentierung von Inhalten