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:

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

Beispiel Symbolleiste

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-Gruppe" >
  3. ...
  4. </div>
  5. </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.

  1. <div class = "btn-Gruppe" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Aktion
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "Dropdown-Menü" >
  7. <!-- Dropdown-Menü-Links -->
  8. </ul>
  9. </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ätzlichen Schaltflächenklassen .btn-mini, .btn-small, oder .btn-largezur Größenanpassung.

  1. <div class = "btn-Gruppe" >
  2. ...
  3. <ul class = "Dropdown-Menü nach rechts ziehen" >
  4. <!-- Dropdown-Menü-Links -->
  5. </ul>
  6. </div>

Beispiel-Markup

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

  1. <div class = "btn-Gruppe" >
  2. <button class = "btn" > Aktion </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "Dropdown-Menü" >
  7. <!-- Dropdown-Menü-Links -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "Dropdown-Menü" >
  7. <!-- Dropdown-Menü-Links -->
  8. </ul>
  9. </div>

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

  1. <div class = "Seitenumbruch" >
  2. <ul>
  3. <li><a href = "#" > Zurück </a></li>
  4. <li class = "aktiv" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Weiter </a></li>
  11. </ul>
  12. </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.

  1. <ul class = "Pager" >
  2. <li>
  3. <a href = "#" > Zurück </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Weiter </a>
  7. </li>
  8. </ul>

Ausgerichtete Links

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

  1. <ul class = "Pager" >
  2. <li class = "vorherige" >
  3. <a href = "#" > Ältere </a>
  4. </li>
  5. <li class = "weiter" >
  6. <a href = "#" > Neuere → </a>
  7. </li>
  8. </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>
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>

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:

  1. <div class = "heldeneinheit" >
  2. <h1> Überschrift </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a class = "btn btn-primär btn-groß" >
  6. Mehr erfahren
  7. </a>
  8. </p>
  9. </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 Platzieren und Segmentieren von Inhaltsabschnitten auf einer Seite. Es kann das h1Standardelement smallvon sowie die meisten anderen Komponenten (mit zusätzlichen Stilen) verwenden.

  1. <div class = "Seitenkopf" >
  2. <h1> Beispielseitenkopf </h1>
  3. </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 :

  1. <ul class = "Miniaturansichten" >
  2. <li class = "span3" >
  3. <a href = "#" class = "miniaturbild" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "Miniaturansichten" >
  2. <li class = "span3" >
  3. <div class = "miniaturbild" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Thumbnail-Label </h5>
  6. <p> Miniaturbildbeschriftung hier... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.
  1. <div class = "Alarm" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Achtung! </strong> Überprüfe am besten dich selbst, du siehst nicht besonders gut aus.
  4. </div>

Kopf hoch! iOS-Geräte benötigen eine href="#"zum Ablehnen von Warnungen. Stellen Sie sicher, dass es und das Datenattribut für Symbole zum Schließen von Ankern enthalten sind. 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.

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.

  1. <div class = "alert alarm-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Warnung! </h4>
  4. Überprüfe am besten dich selbst, du bist nicht...
  5. </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.
  1. <div class = "alert alarm-error" >
  2. ...
  3. </div>

Erfolg

Gut erledigt! Sie haben diese wichtige Warnmeldung erfolgreich gelesen.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Information

Kopf hoch! Diese Warnung erfordert Ihre Aufmerksamkeit, ist aber nicht besonders wichtig.
  1. <div class = "alert alarm-info" >
  2. ...
  3. </div>

Beispiele und Markups

Basic

Standard-Fortschrittsbalken mit vertikalem Farbverlauf.

  1. <div class = "fortschritt" >
  2. <div class = "bar"
  3. style = " width : 60 %; " ></div>
  4. </div>

Gestreift

Verwendet einen Farbverlauf, um einen Streifeneffekt zu erzeugen (kein IE).

  1. <div class = "fortschritt fortschritt-gestreift" >
  2. <div class = "bar"
  3. style = " width : 20 %; " ></div>
  4. </div>

Animiert

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

  1. <div class = "Fortschritt Fortschritt-gestreift
  2. aktiv" >
  3. <div class = "bar"
  4. style = " width : 40 %; " ></div>
  5. </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!
  1. <div class = "gut" >
  2. ...
  3. </div>

Schließen-Symbol

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

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

iOS-Geräte erfordern ein href="#" für Klickereignisse, wenn Sie lieber einen Anker verwenden.

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