Verfügbare Glyphen

Enthält über 250 Glyphen im Schriftformat aus dem Glyphicon Halflings-Set. Glyphicons Halflings sind normalerweise nicht kostenlos erhältlich, aber ihr Schöpfer hat sie für Bootstrap kostenlos zur Verfügung gestellt. Als Dankeschön bitten wir Sie nur darum, wann immer möglich einen Link zurück zu Glyphicons einzufügen .

glyphicon glyphicon-Sternchen
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-Wolke
glyphicon glyphicon-Umschlag
glyphicon glyphicon-bleistift
glyphicon glyphicon-glas
glyphicon glyphicon-musik
glyphicon glyphicon-suche
glyphicon glyphicon-herz
glyphicon glyphicon-stern
glyphicon glyphicon-stern-leer
glyphicon glyphicon-Benutzer
glyphicon glyphicon-film
glyphicon glyphicon-th-groß
glyphicon glyphicon-th
glyphicon glyphicon-th-Liste
glyphicon glyphicon-ok
glyphicon glyphicon-entfernen
glyphicon glyphicon-zoom-in
glyphicon glyphicon-verkleinern
glyphicon glyphicon-aus
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-müll
glyphicon glyphicon-home
glyphicon glyphicon-Datei
glyphicon glyphicon-zeit
glyphicon glyphicon-straße
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-posteingang
glyphicon glyphicon-spielkreis
glyphicon glyphicon-Wiederholung
glyphicon glyphicon-aktualisierung
glyphicon glyphicon-liste-alt
glyphicon glyphicon-Schloss
glyphicon glyphicon-flag
glyphicon glyphicon-kopfhörer
glyphicon glyphicon-lautstärke-aus
glyphicon glyphicon-leiser
glyphicon glyphicon-lauter
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-Tags
glyphicon glyphicon-buch
glyphicon glyphicon-lesezeichen
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-Schriftart
glyphicon glyphicon-fett
glyphicon glyphicon-kursiv
glyphicon glyphicon-texthöhe
glyphicon glyphicon-textbreite
glyphicon glyphicon-links ausrichten
glyphicon glyphicon-ausrichten-zentrieren
glyphicon glyphicon-rechts ausrichten
glyphicon glyphicon-ausrichten-ausrichten
glyphicon glyphicon-liste
glyphicon glyphicon-einzug-links
glyphicon glyphicon-einzug-rechts
glyphicon glyphicon-facetime-video
glyphicon glyphicon-bild
glyphicon glyphicon-kartenmarkierung
glyphicon glyphicon-anpassen
glyphicon glyphicon-Tönung
glyphicon glyphicon-bearbeiten
glyphicon glyphicon-Aktie
glyphicon glyphicon-check
glyphicon glyphicon-bewegen
glyphicon glyphicon-schritt-rückwärts
glyphicon glyphicon-schnell-rückwärts
glyphicon glyphicon-rückwärts
glyphicon glyphicon-spielen
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-vorwärts
glyphicon glyphicon-schneller Vorlauf
glyphicon glyphicon-schritt-vorwärts
glyphicon glyphicon-auswerfen
glyphicon glyphicon-chevron-links
glyphicon glyphicon-chevron-rechts
glyphicon glyphicon-plus-zeichen
glyphicon glyphicon-minuszeichen
glyphicon glyphicon-entfernen-zeichen
glyphicon glyphicon-ok-zeichen
glyphicon glyphicon-fragezeichen
glyphicon glyphicon-info-zeichen
glyphicon glyphicon-screenshot
glyphicon glyphicon-Entfernen-Kreis
glyphicon glyphicon-ok-Kreis
glyphicon glyphicon-ban-Kreis
glyphicon glyphicon-pfeil-links
glyphicon glyphicon-pfeil-rechts
glyphicon glyphicon-Pfeil nach oben
glyphicon glyphicon-Pfeil-nach-unten
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-ausrufezeichen
glyphicon glyphicon-Geschenk
glyphicon glyphicon-Blatt
glyphicon glyphicon-feuer
glyphicon glyphicon-auge-offen
glyphicon glyphicon-auge-schließen
glyphicon glyphicon-warnzeichen
glyphicon glyphicon-Ebene
glyphicon glyphicon-kalender
glyphicon glyphicon-zufällig
glyphicon glyphicon-Kommentar
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-oben
glyphicon glyphicon-chevron-unten
glyphicon glyphicon-retweet
glyphicon glyphicon-warenkorb
glyphicon glyphicon-ordner-schließen
glyphicon glyphicon-ordner-öffnen
glyphicon glyphicon-größenänderung-vertikal
glyphicon glyphicon-skalieren-horizontal
glyphicon glyphicon-festplatte
glyphicon glyphicon-Stierhorn
glyphicon glyphicon-Glocke
glyphicon glyphicon-Zertifikat
glyphicon glyphicon-daumen hoch
glyphicon glyphicon-daumen-runter
glyphicon glyphicon-hand-rechts
glyphicon glyphicon-hand-links
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-kreis-pfeil-rechts
glyphicon glyphicon-kreis-pfeil-links
glyphicon glyphicon-kreis-pfeil-oben
glyphicon glyphicon-kreis-pfeil-unten
glyphicon glyphicon-Globus
glyphicon glyphicon-schlüssel
glyphicon glyphicon-aufgaben
glyphicon glyphicon-filter
glyphicon glyphicon-aktenkoffer
glyphicon glyphicon-Vollbild
glyphicon glyphicon-dashboard
glyphicon glyphicon-Büroklammer
glyphicon glyphicon-herz-leer
glyphicon glyphicon-link
glyphicon glyphicon-telefon
glyphicon glyphicon-pin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-nach-alphabet-sortieren
glyphicon glyphicon-sortieren-nach-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sortieren-nach-attributen
glyphicon glyphicon-nach-attributen-sortieren-alt
glyphicon glyphicon-nicht markiert
glyphicon glyphicon-erweitern
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-anmeldung
glyphicon glyphicon-flash
glyphicon glyphicon-abmelden
glyphicon glyphicon-neues-fenster
glyphicon glyphicon-Datensatz
glyphicon glyphicon-speichern
glyphicon glyphicon-offen
glyphicon glyphicon-gespeichert
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-senden
glyphicon glyphicon-diskette
glyphicon glyphicon-floppy-gespeichert
glyphicon glyphicon-floppy-entfernen
glyphicon glyphicon-floppy-save
glyphicon glyphicon-diskette-öffnen
glyphicon glyphicon-kreditkarte
glyphicon glyphicon-transfer
glyphicon glyphicon-besteck
glyphicon glyphicon-header
glyphicon glyphicon-komprimiert
glyphicon glyphicon-Kopfhörer
glyphicon glyphicon-telefon-alt
glyphicon glyphicon-turm
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-untertitel
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-Copyright-Zeichen
glyphicon glyphicon-registrierungszeichen
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-Baum-Nadelbaum
glyphicon glyphicon-baum-laubabwerfend
glyphicon glyphicon-cd
glyphicon glyphicon-speicherdatei
glyphicon glyphicon-Datei öffnen
glyphicon glyphicon-level-up
glyphicon glyphicon-Kopie
glyphicon glyphicon-paste
glyphicon glyphicon-Alarm
glyphicon glyphicon-equalizer
glyphicon glyphicon-könig
glyphicon glyphicon-Königin
glyphicon glyphicon-Bauer
glyphicon glyphicon-bischof
glyphicon glyphicon-ritter
glyphicon glyphicon-baby-formel
glyphicon glyphicon-zelt
glyphicon glyphicon-tafel
glyphicon glyphicon-Bett
glyphicon glyphicon-Apfel
glyphicon glyphicon-löschen
glyphicon glyphicon-sanduhr
glyphicon glyphicon-lampe
glyphicon glyphicon-Duplikat
glyphicon glyphicon-sparschwein
glyphicon glyphicon-Schere
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-Rubel
glyphicon glyphicon-reiben
glyphicon glyphicon-Skala
glyphicon glyphicon-eis am stiel
glyphicon glyphicon-eislutsch-geschmeckt
glyphicon glyphicon-bildung
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertikal
glyphicon glyphicon-menü-hamburger
glyphicon glyphicon-modal-Fenster
glyphicon glyphicon-öl
glyphicon glyphicon-Korn
glyphicon glyphicon-sonnenbrille
glyphicon glyphicon-textgröße
glyphicon glyphicon-textfarbe
glyphicon glyphicon-texthintergrund
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-objekt-horizontal ausrichten
glyphicon glyphicon-objekt-links ausrichten
glyphicon glyphicon-objekt-ausrichten-vertikal
glyphicon glyphicon-objekt-rechts ausrichten
glyphicon glyphicon-dreieck-rechts
glyphicon glyphicon-dreieck-links
glyphicon glyphicon-dreieck-unten
glyphicon glyphicon-dreieck-top
glyphicon glyphicon-konsole
glyphicon glyphicon-hochgestellt
glyphicon glyphicon-tiefgestellt
glyphicon glyphicon-menü links
glyphicon glyphicon-menü-rechts
glyphicon glyphicon-Menü nach unten
glyphicon glyphicon-menu-up

Wie benutzt man

Aus Leistungsgründen benötigen alle Symbole eine Basisklasse und eine individuelle Symbolklasse. Platzieren Sie zur Verwendung den folgenden Code an einer beliebigen Stelle. Stellen Sie sicher, dass zwischen dem Symbol und dem Text ein Leerzeichen gelassen wird, um eine ordnungsgemäße Auffüllung zu gewährleisten.

Nicht mit anderen Komponenten mischen

Symbolklassen können nicht direkt mit anderen Komponenten kombiniert werden. Sie sollten nicht zusammen mit anderen Klassen für dasselbe Element verwendet werden. Fügen Sie stattdessen eine verschachtelte hinzu <span>und wenden Sie die Symbolklassen auf die <span>.

Nur für leere Elemente

Symbolklassen sollten nur auf Elementen verwendet werden, die keinen Textinhalt enthalten und keine untergeordneten Elemente haben.

Ändern der Position der Symbolschrift

Bootstrap geht davon aus, dass sich Symbolschriftdateien ../fonts/relativ zu den kompilierten CSS-Dateien im Verzeichnis befinden. Das Verschieben oder Umbenennen dieser Schriftartdateien bedeutet, dass das CSS auf eine von drei Arten aktualisiert wird:

Ändern Sie die @icon-font-pathund/oder @icon-font-nameVariablen in den Less-Quelldateien.
Verwenden Sie die vom Less-Compiler bereitgestellte Option für relative URLs .
Ändern Sie die url()Pfade im kompilierten CSS.

Verwenden Sie die Option, die am besten zu Ihrem spezifischen Entwicklungs-Setup passt.

Zugängliche Symbole

Moderne Versionen von Hilfstechnologien kündigen CSS-generierte Inhalte sowie bestimmte Unicode-Zeichen an. Um eine unbeabsichtigte und verwirrende Ausgabe in Screenreadern zu vermeiden (insbesondere wenn Icons nur zur Dekoration verwendet werden), blenden wir diese mit dem aria-hidden="true"Attribut aus.

Wenn Sie ein Symbol verwenden, um Bedeutung zu vermitteln (und nicht nur als dekoratives Element), stellen Sie sicher, dass diese Bedeutung auch an unterstützende Technologien übermittelt wird – fügen Sie beispielsweise zusätzliche Inhalte hinzu, die mit der .sr-onlyKlasse visuell verborgen sind.

Wenn Sie Steuerelemente ohne anderen Text erstellen (z. B. <button>ein Symbol, das nur ein Symbol enthält), sollten Sie immer alternative Inhalte bereitstellen, um den Zweck des Steuerelements zu identifizieren, damit es für Benutzer von Hilfstechnologien sinnvoll ist. In diesem Fall könnten Sie aria-labeldem Steuerelement selbst ein Attribut hinzufügen.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Beispiele

Verwenden Sie sie in Schaltflächen, Schaltflächengruppen für eine Symbolleiste, Navigation oder vorangestellte Formulareingaben.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Ein Symbol, das in einer Warnung verwendet wird , um anzuzeigen, dass es sich um eine Fehlermeldung handelt, mit zusätzlichem .sr-onlyText, um diesen Hinweis Benutzern von Hilfstechnologien mitzuteilen.

Geben sie eine gültige E-Mail-Adresse an

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

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

Beispiel

Umschließen Sie den Auslöser des Dropdown-Menüs und das Dropdown-Menü .dropdownmit oder einem anderen Element, das deklariert position: relative;. Fügen Sie dann den HTML-Code des Menüs hinzu.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dropdown-Menüs können so geändert werden, dass sie nach oben (statt nach unten) erweitert werden, indem .dropupsie zum übergeordneten Element hinzugefügt werden.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Ausrichtung

Standardmäßig wird ein Dropdown-Menü automatisch 100 % von oben und entlang der linken Seite seines übergeordneten Elements positioniert. Fügen Sie .dropdown-menu-rightzu a .dropdown-menuhinzu, um das Dropdown-Menü rechts auszurichten.

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

Überschriften

Fügen Sie eine Kopfzeile hinzu, um Aktionsabschnitte in einem beliebigen Dropdown-Menü zu kennzeichnen.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Teiler

Fügen Sie eine Trennlinie hinzu, um eine Reihe von Links in einem Dropdown-Menü zu trennen.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Menüpunkte deaktiviert

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Gruppieren Sie mit der Schaltflächengruppe eine Reihe von Schaltflächen in einer einzigen Zeile. Fügen Sie mit unserem Schaltflächen-Plug-in ein optionales JavaScript-Radio- und Checkbox-Stilverhalten hinzu .

QuickInfos und Popovers in Schaltflächengruppen erfordern spezielle Einstellungen

Wenn Sie Tooltips oder Popovers auf Elementen innerhalb einer verwenden .btn-group, müssen Sie die Option angeben container: 'body', um unerwünschte Nebeneffekte zu vermeiden (z. B. dass das Element breiter wird und/oder seine abgerundeten Ecken verliert, wenn der Tooltip oder das Popover ausgelöst wird).

Stellen Sie sicher, dass es richtig ist `role`, und geben Sie ein Etikett an

Damit unterstützende Technologien – wie z. B. Screenreader – vermitteln können, dass eine Reihe von Schaltflächen gruppiert sind, muss ein entsprechendes roleAttribut bereitgestellt werden. Für Schaltflächengruppen wäre dies role="group", während Symbolleisten ein role="toolbar".

Eine Ausnahme bilden Gruppen, die nur ein einziges Steuerelement enthalten (z. B. die Blocksatzgruppen mit <button>Elementen) oder ein Dropdown.

Außerdem sollten Gruppen und Symbolleisten mit einem expliziten Label versehen werden, da die meisten Hilfstechnologien sie sonst nicht ankündigen, obwohl das richtige roleAttribut vorhanden ist. In den hier bereitgestellten Beispielen verwenden wir aria-label, aber es können auch Alternativen wie aria-labelledbyverwendet werden.

Einfaches Beispiel

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

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

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

Dimensionierung

Anstatt Schaltflächengrößenklassen auf jede Schaltfläche in einer Gruppe anzuwenden, fügen Sie sie einfach .btn-group-*zu jeder hinzu .btn-group, auch wenn Sie mehrere Gruppen verschachteln.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Verschachtelung

Platzieren Sie eines .btn-groupin einem anderen .btn-group, wenn Sie Dropdown-Menüs gemischt mit einer Reihe von Schaltflächen haben möchten.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Vertikale Variation

Lassen Sie eine Reihe von Schaltflächen vertikal statt horizontal gestapelt erscheinen. Geteilte Schaltflächen-Dropdowns werden hier nicht unterstützt.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

Blocksatzgruppen

Lassen Sie eine Gruppe von Schaltflächen in gleichen Größen strecken, um die gesamte Breite des übergeordneten Elements zu überspannen. Funktioniert auch mit Schaltflächen-Dropdowns innerhalb der Schaltflächengruppe.

Umgang mit Grenzen

Aufgrund des spezifischen HTML und CSS, das zum Ausrichten von Schaltflächen verwendet wird (nämlich display: table-cell), werden die Grenzen zwischen ihnen verdoppelt. Wird in regulären Schaltflächengruppen margin-left: -1pxverwendet, um die Ränder zu stapeln, anstatt sie zu entfernen. Funktioniert jedoch marginnicht mit display: table-cell. Abhängig von Ihren Anpassungen an Bootstrap möchten Sie daher möglicherweise die Ränder entfernen oder neu einfärben.

IE8 und Grenzen

Internet Explorer 8 rendert keine Rahmen auf Schaltflächen in einer Blocksatz-Schaltflächengruppe, unabhängig davon, ob es sich um Ein- <a>oder <button>Elemente handelt. Um das zu umgehen, wickeln Sie jede Schaltfläche in eine andere ein .btn-group.

Siehe #12476 für weitere Informationen.

Mit `<a>`Elementen

Wickeln Sie einfach eine Reihe von .btns in ein .btn-group.btn-group-justified.

Links Mitte Recht

Links Mitte

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Links, die als Schaltflächen fungieren

Wenn die <a>Elemente verwendet werden, um als Schaltflächen zu fungieren, die In-Page-Funktionen auslösen, anstatt zu einem anderen Dokument oder Abschnitt innerhalb der aktuellen Seite zu navigieren, sollten sie auch eine entsprechende role="button".

Mit `<button>`Elementen

Um Blocksatz-Schaltflächengruppen mit <button>Elementen zu verwenden, müssen Sie jede Schaltfläche in eine Schaltflächengruppe einschließen . Die meisten Browser wenden unser CSS für die Ausrichtung auf <button>Elemente nicht richtig an, aber da wir Schaltflächen-Dropdowns unterstützen, können wir das umgehen.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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.

Plugin-Abhängigkeit

Schaltflächen- Dropdowns erfordern, dass das Dropdown -Plug- in in Ihrer Version von Bootstrap enthalten ist.

Dropdown-Menüs mit einer einzigen Schaltfläche

Verwandeln Sie eine Schaltfläche mit einigen grundlegenden Markup-Änderungen in einen Dropdown-Schalter.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Drop-downs für geteilte Schaltflächen

Erstellen Sie auf ähnliche Weise geteilte Schaltflächen-Dropdowns mit denselben Markup-Änderungen, nur mit einer separaten Schaltfläche.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dimensionierung

Schaltflächen-Dropdowns funktionieren mit Schaltflächen aller Größen.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Dropup-Variante

Auslösen von Dropdown-Menüs über Elementen durch Hinzufügen .dropupzum übergeordneten Element.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Erweitern Sie Formularsteuerelemente, indem Sie Text oder Schaltflächen vor, nach oder auf beiden Seiten einer textbasierten <input>. Verwenden Sie .input-groupein .input-group-addonoder .input-group-btn, um Elemente einem einzelnen voranzustellen oder anzuhängen .form-control.

Nur textuelle `<input>`s

Vermeiden Sie <select>hier die Verwendung von Elementen, da sie in WebKit-Browsern nicht vollständig formatiert werden können.

Vermeiden Sie <textarea>hier die Verwendung von Elementen, da deren rowsAttribute in einigen Fällen nicht berücksichtigt werden.

QuickInfos und Popovers in Eingabegruppen erfordern spezielle Einstellungen

Wenn Sie Tooltips oder Popovers auf Elementen innerhalb einer verwenden .input-group, müssen Sie die Option angeben container: 'body', um unerwünschte Nebeneffekte zu vermeiden (z. B. dass das Element breiter wird und/oder seine abgerundeten Ecken verliert, wenn der Tooltip oder das Popover ausgelöst wird).

Nicht mit anderen Komponenten mischen

Mischen Sie Formulargruppen oder Rasterspaltenklassen nicht direkt mit Eingabegruppen. Verschachteln Sie die Eingabegruppe stattdessen innerhalb der Formulargruppe oder des rasterbezogenen Elements.

Fügen Sie immer Labels hinzu

Screenreader werden Probleme mit Ihren Formularen haben, wenn Sie nicht für jede Eingabe eine Bezeichnung einfügen. Stellen Sie für diese Eingabegruppen sicher, dass alle zusätzlichen Bezeichnungen oder Funktionen an Hilfstechnologien weitergegeben werden.

Die genaue zu verwendende Technik (sichtbare <label>Elemente, <label>mithilfe der Klasse verborgene Elemente oder .sr-onlyVerwendung des aria-label, aria-labelledby, aria-describedbyoder -Attributs) und welche zusätzlichen Informationen übermittelt werden müssen, hängt von der genauen Art des Schnittstellen-Widgets ab, das Sie implementieren. Die Beispiele in diesem Abschnitt bieten einige Vorschläge für fallspezifische Ansätze.titleplaceholder

Einfaches Beispiel

Platzieren Sie ein Add-On oder eine Schaltfläche auf beiden Seiten eines Eingangs. Sie können auch einen auf beiden Seiten eines Eingangs platzieren.

Wir unterstützen nicht mehrere Add-Ons ( .input-group-addonoder .input-group-btn) auf einer Seite.

Wir unterstützen nicht mehrere Formularsteuerelemente in einer einzelnen Eingabegruppe.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Dimensionierung

Fügen Sie die relativen Größenklassen des Formulars zu .input-groupsich selbst hinzu, und der Inhalt darin wird automatisch in der Größe angepasst – es ist nicht erforderlich, die Größenklassen der Formularsteuerelemente für jedes Element zu wiederholen.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Kontrollkästchen und Radio-Addons

Platzieren Sie anstelle von Text ein beliebiges Kontrollkästchen oder eine Radiooption im Addon einer Eingabegruppe.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Schaltflächen-Add-Ons

Schaltflächen in Eingabegruppen sind etwas anders und erfordern eine zusätzliche Verschachtelungsebene. Anstelle von .input-group-addonmüssen Sie verwenden .input-group-btn, um die Schaltflächen zu umschließen. Dies ist aufgrund von Standardbrowserstilen erforderlich, die nicht überschrieben werden können.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Schaltflächen mit Dropdowns

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Segmentierte Schaltflächen

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Mehrere Tasten

Während Sie nur ein Add-On pro Seite haben können, können Sie mehrere Schaltflächen in einer einzigen haben .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

In Bootstrap verfügbare Navs haben gemeinsames Markup, beginnend mit der Basisklasse .nav, sowie gemeinsame Zustände. Tauschen Sie Modifikatorklassen aus, um zwischen den einzelnen Stilen zu wechseln.

Die Verwendung von Navs für Tab-Panels erfordert das JavaScript-Tabs-Plugin

Für Registerkarten mit Tab-Bereichen müssen Sie das JavaScript-Plugin für Registerkarten verwenden . Das Markup erfordert auch zusätzliche roleund ARIA-Attribute – siehe das Beispiel-Markup des Plugins für weitere Details.

Als Navigation verwendete Navigationsgeräte barrierefrei machen

Wenn Sie Navs verwenden, um eine Navigationsleiste bereitzustellen, stellen Sie sicher, dass Sie ein role="navigation"zum logischsten übergeordneten Container der hinzufügen oder ein Element um die gesamte Navigation <ul>wickeln . <nav>Fügen Sie die Rolle nicht zu <ul>sich selbst hinzu, da dies verhindern würde, dass sie von Hilfstechnologien als tatsächliche Liste angekündigt wird.

Registerkarten

Beachten Sie , dass die Klasse die Basisklasse .nav-tabserfordert ..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pillen

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pillen sind auch vertikal stapelbar. Einfach hinzufügen .nav-stacked.

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

Gerechtfertigt

Machen Sie Tabs oder Pillen auf Bildschirmen, die breiter als 768 Pixel sind, mit einfach gleich breit wie ihre Eltern .nav-justified. Auf kleineren Bildschirmen sind die Navigationslinks gestapelt.

Justierte Navigationsleisten-Navigationslinks werden derzeit nicht unterstützt.

Safari und reaktionsschnelle gerechtfertigte Navigationsgeräte

Ab v9.1.2 weist Safari einen Fehler auf, bei dem die horizontale Größenänderung Ihres Browsers Darstellungsfehler in der Blocksatz-Navigation verursacht, die beim Aktualisieren gelöscht werden. Dieser Fehler wird auch im gerechtfertigten Navigationsbeispiel gezeigt .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Links deaktiviert

Fügen Sie für jede Navigationskomponente (Tabs oder Pillen) .disabledfür graue Links und keine Hover-Effekte hinzu .

Link-Funktionalität nicht beeinträchtigt

Diese Klasse ändert nur das <a>Aussehen von , nicht seine Funktionalität. Verwenden Sie benutzerdefiniertes JavaScript, um Links hier zu deaktivieren.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Verwenden von 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 role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Pillen mit Dropdowns

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbars sind responsive Metakomponenten, die als Navigationskopfzeilen für Ihre Anwendung oder Website dienen. Sie beginnen in mobilen Ansichten reduziert (und sind umschaltbar) und werden horizontal, wenn die verfügbare Breite des Ansichtsfensters zunimmt.

Justierte Navigationsleisten-Navigationslinks werden derzeit nicht unterstützt.

Überlaufender Inhalt

Da Bootstrap nicht weiß, wie viel Platz der Inhalt in Ihrer Navigationsleiste benötigt, könnten Probleme mit dem Umbruch von Inhalten in eine zweite Zeile auftreten. Um dies zu beheben, können Sie:

Reduzieren Sie die Menge oder Breite der Navigationsleistenelemente.
Blenden Sie bestimmte Elemente der Navigationsleiste bei bestimmten Bildschirmgrößen mithilfe von responsiven Hilfsklassen aus .
Ändern Sie den Punkt, an dem Ihre Navigationsleiste zwischen reduziertem und horizontalem Modus wechselt. Passen Sie die @grid-float-breakpointVariable an oder fügen Sie Ihre eigene Medienabfrage hinzu.

Ändern des eingeklappten mobilen Navigationsleisten-Haltepunkts

Die Navigationsleiste wird in ihre vertikale mobile Ansicht reduziert, wenn das Ansichtsfenster schmaler als @grid-float-breakpointist, und in ihre horizontale nicht mobile Ansicht erweitert, wenn das Ansichtsfenster mindestens @grid-float-breakpointbreit ist. Passen Sie diese Variable in der Less-Quelle an, um zu steuern, wann die Navigationsleiste reduziert/erweitert wird. Der Standardwert ist 768px(der kleinste "kleine" oder "Tablet"-Bildschirm).

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Ersetzen Sie die Navbar-Marke durch Ihr eigenes Bild, indem Sie den Text durch eine <img>. Da das .navbar-brandüber eine eigene Polsterung und Höhe verfügt, müssen Sie je nach Bild möglicherweise einige CSS überschreiben.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Platzieren Sie Formularinhalte .navbar-formfür eine ordnungsgemäße vertikale Ausrichtung und ein reduziertes Verhalten in schmalen Ansichtsfenstern. Verwenden Sie die Ausrichtungsoptionen, um zu entscheiden, wo es sich innerhalb des Inhalts der Navigationsleiste befindet.

Als Vorwarnung .navbar-formteilt es einen Großteil seines Codes mit .form-inlinevia mixin. Einige Formularsteuerelemente, wie Eingabegruppen, erfordern möglicherweise feste Breiten, um in einer Navigationsleiste richtig angezeigt zu werden.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Fügen Sie immer Labels hinzu

Screenreader werden Probleme mit Ihren Formularen haben, wenn Sie nicht für jede Eingabe eine Bezeichnung einfügen. Bei diesen Inline-Formularen können Sie die Beschriftungen mithilfe der .sr-onlyKlasse ausblenden. Es gibt weitere alternative Verfahren zum Bereitstellen einer Kennzeichnung für Hilfstechnologien, wie z. B. das aria-label, aria-labelledbyoder title-Attribut. Wenn keines davon vorhanden ist, können Screenreader auf das placeholderAttribut zurückgreifen, falls vorhanden, aber beachten Sie, dass die Verwendung von placeholderals Ersatz für andere Kennzeichnungsmethoden nicht empfohlen wird.

Fügen Sie die .navbar-btnKlasse zu <button>Elementen hinzu, die sich nicht in a <form>befinden, um sie vertikal in der Navigationsleiste zu zentrieren.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

<p class="navbar-text">Signed in as Mark Otto</p>

Für Leute, die Standardlinks verwenden, die nicht in der regulären Navbar-Navigationskomponente enthalten sind, verwenden Sie die .navbar-linkKlasse, um die richtigen Farben für die Standard- und inversen Navbar-Optionen hinzuzufügen.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Richten Sie Navigationslinks, Formulare, Schaltflächen oder Text mit den Dienstprogrammklassen .navbar-leftoder aus. .navbar-rightBeide Klassen fügen einen CSS-Float in der angegebenen Richtung hinzu. Um beispielsweise Nav-Links auszurichten, platzieren Sie sie in einer separaten <ul>mit der entsprechenden Utility-Klasse angewendet.

Diese Klassen sind gemischte Versionen von .pull-leftund .pull-right, aber sie sind auf Medienabfragen beschränkt, um die Handhabung von Navigationsleistenkomponenten über Gerätegrößen hinweg zu vereinfachen.

Fügen Sie .navbar-fixed-topein .containeroder .container-fluidhinzu, um den Inhalt der Navigationsleiste zu zentrieren und aufzufüllen.

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

Körperpolster erforderlich

Die fixierte Navigationsleiste überlagert Ihre anderen Inhalte, es sei denn, Sie fügen paddingoben in der <body>. Probieren Sie Ihre eigenen Werte aus oder verwenden Sie unser Snippet unten. Tipp: Standardmäßig ist die Navigationsleiste 50 Pixel hoch.

body { padding-top: 70px; }

Stellen Sie sicher, dass Sie dies nach dem Kern-Bootstrap-CSS einfügen.

Fügen Sie .navbar-fixed-bottomein .containeroder .container-fluidhinzu, um den Inhalt der Navigationsleiste zu zentrieren und aufzufüllen.

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

Körperpolster erforderlich

Die fixierte Navigationsleiste wird Ihren anderen Inhalt überlagern, es sei denn, Sie fügen paddingam Ende der <body>. Probieren Sie Ihre eigenen Werte aus oder verwenden Sie unser Snippet unten. Tipp: Standardmäßig ist die Navigationsleiste 50 Pixel hoch.

body { padding-bottom: 70px; }

Stellen Sie sicher, dass Sie dies nach dem Kern-Bootstrap-CSS einfügen.

Erstellen Sie eine Navigationsleiste in voller Breite, die mit der Seite wegscrollt, indem Sie .navbar-static-topein .containeroder hinzufügen und einschließen .container-fluid, um den Inhalt der Navigationsleiste zu zentrieren und aufzufüllen.

Im Gegensatz zu den .navbar-fixed-*Klassen müssen Sie keine Auffüllung auf der ändern body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

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

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

Semmelbrösel

Geben Sie die Position der aktuellen Seite innerhalb einer Navigationshierarchie an.

Trennzeichen werden in CSS automatisch durch :beforeund hinzugefügt content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Seitennummerierung

Stellen Sie Paginierungslinks für Ihre Website oder App mit der mehrseitigen Paginierungskomponente oder der einfacheren Pager-Alternative bereit .

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.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Beschriften der Paginierungskomponente

Die Paginierungskomponente sollte in ein <nav>Element eingeschlossen werden, um sie als Navigationsabschnitt für Screenreader und andere Hilfstechnologien zu identifizieren. Da eine Seite wahrscheinlich bereits mehr als einen solchen Navigationsabschnitt hat (z. B. die primäre Navigation in der Kopfzeile oder eine Seitenleistennavigation), ist es außerdem ratsam, eine Beschreibung aria-labelfür die bereitzustellen <nav>, die ihren Zweck widerspiegelt. Wenn beispielsweise die Paginierungskomponente verwendet wird, um zwischen einer Reihe von Suchergebnissen zu navigieren, könnte eine geeignete Bezeichnung aria-label="Search results pages".

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.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Wir empfehlen, dass Sie aktive oder deaktivierte Anker durch <span>ersetzen oder den Anker im Fall der Zurück-/Weiter-Pfeile weglassen, um die Klickfunktionalität zu entfernen und gleichzeitig die beabsichtigten Stile beizubehalten.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Dimensionierung

Lust auf größere oder kleinere Paginierung? Hinzufügen .pagination-lgoder .pagination-smfür zusätzliche Größen.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

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.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Ausgerichtete Links

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Optionaler deaktivierter Zustand

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Beispiel

Beispielüberschrift Neu

<h3>Example heading <span class="label label-default">New</span></h3>

Verfügbare Varianten

Fügen Sie eine der unten genannten Modifikatorklassen hinzu, um das Erscheinungsbild einer Beschriftung zu ändern.

Standardmäßige primäre Erfolgsinfo - Warnung Gefahr

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Haben Sie Tonnen von Etiketten?

Rendering-Probleme können auftreten, wenn Sie Dutzende von Inline-Labels in einem schmalen Container haben, die jeweils ihr eigenes inline-blockElement enthalten (z. B. ein Symbol). Der Weg dazu ist die Einstellung display: inline-block;. Kontext und ein Beispiel finden Sie unter #13219 .

Heben Sie neue oder ungelesene Elemente ganz einfach hervor, indem Sie ein <span class="badge">zu Links, Bootstrap-Navigationen und mehr hinzufügen.

Posteingang42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Selbst zusammenbrechen

Wenn es keine neuen oder ungelesenen Elemente gibt, werden Badges einfach reduziert (über den CSS- :emptySelektor), vorausgesetzt, dass darin kein Inhalt vorhanden ist.

Cross-Browser-Kompatibilität

Badges werden in Internet Explorer 8 nicht automatisch ausgeblendet, da der :emptySelektor nicht unterstützt wird.

Passt sich an aktive Navigationszustände an

Integrierte Stile sind enthalten, um Abzeichen in aktiven Zuständen in Pillennavigationen zu platzieren.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Eine leichte, flexible Komponente, die optional den gesamten Darstellungsbereich erweitern kann, um wichtige Inhalte auf Ihrer Website zu präsentieren.

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="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Um das Jumbotron in voller Breite und ohne abgerundete Ecken zu machen, platzieren Sie es außerhalb aller .containers und fügen Sie stattdessen ein .containerinnerhalb hinzu.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

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="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Erweitern Sie das Rastersystem von Bootstrap mit der Thumbnail-Komponente, um Raster aus Bildern, Videos, Text und mehr einfach anzuzeigen.

Wenn Sie nach einer Pinterest-ähnlichen Darstellung von Miniaturansichten mit unterschiedlichen Höhen und/oder Breiten suchen, müssen Sie ein Drittanbieter-Plugin wie Masonry , Isotope oder Salvattare verwenden .

Standardbeispiel

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Benutzerdefinierte Inhalte

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.

Taste Taste

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.

Taste Taste

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.

Taste Taste

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Stellen Sie kontextbezogene Rückmeldungen für typische Benutzeraktionen mit einer Handvoll verfügbarer und flexibler Warnmeldungen bereit.

Beispiele

Fügen Sie beliebigen Text und eine optionale Schaltfläche zum Schließen in .alerteine der vier Kontextklassen (z. B. .alert-success) für grundlegende Warnmeldungen ein.

Keine Standardklasse

Warnungen haben keine Standardklassen, sondern nur Basis- und Modifikatorklassen. Eine standardmäßige graue Warnung ist nicht sehr sinnvoll, daher müssen Sie einen Typ über eine kontextabhängige Klasse angeben. Wählen Sie zwischen Erfolg, Info, Warnung oder Gefahr.

Gut erledigt! Sie haben diese wichtige Warnmeldung erfolgreich gelesen.

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

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

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

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Unzulässige Warnungen

Bauen Sie auf jeder Warnung auf, indem Sie eine optionale .alert-dismissibleSchaltfläche zum Schließen hinzufügen.

Erfordert JavaScript-Alert-Plugin

Für voll funktionsfähige, verschließbare Warnungen müssen Sie das JavaScript-Plug -in für Warnungen verwenden .

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Stellen Sie das korrekte Verhalten auf allen Geräten sicher

Achten Sie darauf, das <button>Element mit dem Datenattribut zu verwenden data-dismiss="alert".

Links in Benachrichtigungen

Verwenden Sie die .alert-linkUtility-Klasse, um in jeder Warnung schnell übereinstimmende farbige Links bereitzustellen.

Gut erledigt! Sie haben diese wichtige Warnmeldung erfolgreich gelesen .

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

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

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

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Geben Sie mit einfachen, aber flexiblen Fortschrittsbalken aktuelles Feedback zum Fortschritt eines Workflows oder einer Aktion.

Cross-Browser-Kompatibilität

Fortschrittsbalken verwenden CSS3-Übergänge und -Animationen, um einige ihrer Effekte zu erzielen. Diese Funktionen werden in Internet Explorer 9 und darunter oder älteren Versionen von Firefox nicht unterstützt. Opera 12 unterstützt keine Animationen.

Kompatibilität mit Content Security Policy (CSP).

Wenn Ihre Website über eine Content Security Policy (CSP) verfügt, die kein erlaubt style-src 'unsafe-inline', können Sie keine Inline- styleAttribute verwenden, um die Fortschrittsbalkenbreite festzulegen, wie in unseren Beispielen unten gezeigt. Alternative Methoden zum Festlegen der Breiten, die mit strikten CSPs kompatibel sind, umfassen die Verwendung eines kleinen benutzerdefinierten JavaScripts (das element.style.width) oder die Verwendung benutzerdefinierter CSS-Klassen.

Einfaches Beispiel

Standard-Fortschrittsbalken.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Mit Etikett

Entfernen Sie die <span>with .sr-only-Klasse aus der Fortschrittsleiste, um einen sichtbaren Prozentsatz anzuzeigen.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Um sicherzustellen, dass der Beschriftungstext auch bei niedrigen Prozentsätzen lesbar bleibt , sollten Sie min-widthdem Fortschrittsbalken ein hinzufügen.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Kontextuelle Alternativen

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Gestreift

Verwendet einen Farbverlauf, um einen Streifeneffekt zu erzeugen. Nicht verfügbar in IE9 und darunter.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animiert

Fügen Sie hinzu .active, .progress-bar-stripedum die Streifen von rechts nach links zu animieren. Nicht verfügbar in IE9 und darunter.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Gestapelt

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

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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

Standardmedien

Die Standardmedien zeigen ein Medienobjekt (Bilder, Video, Audio) links oder rechts von einem Inhaltsblock an.

Ü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

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.

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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

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

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Die Klassen .pull-leftund .pull-rightsind ebenfalls vorhanden und wurden zuvor als Teil der Medienkomponente verwendet, sind jedoch seit Version 3.3.0 für diese Verwendung veraltet. Sie sind ungefähr äquivalent zu .media-leftund .media-right, außer dass .media-rightsie nach dem .media-bodyin HTML platziert werden sollten.

Medienausrichtung

Die Bilder oder andere Medien können oben, mittig oder unten ausgerichtet werden. Die Standardeinstellung ist oben ausgerichtet.

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Medien mit mittlerer Ausrichtung

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </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.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Listengruppen sind eine flexible und leistungsstarke Komponente, um nicht nur einfache Listen von Elementen anzuzeigen, sondern auch komplexe Listen mit benutzerdefinierten Inhalten.

Einfaches Beispiel

Die einfachste Listengruppe ist einfach eine ungeordnete Liste mit Listenelementen und den richtigen Klassen. Bauen Sie darauf mit den folgenden Optionen oder bei Bedarf mit Ihrem eigenen CSS auf.

Cras justo odio
Dapibus ac facilisis in
Morbi leorisus
Porta ac consectetur ac
Vestibulum bei Eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Abzeichen

Fügen Sie die Badge-Komponente zu einem beliebigen Listengruppenelement hinzu und sie wird automatisch rechts positioniert.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leorisus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Verknüpfte Artikel

Verknüpfen Sie Listengruppenelemente, indem Sie Anchor-Tags anstelle von Listenelementen verwenden (das bedeutet auch ein übergeordnetes Element <div>anstelle eines <ul>). Keine Notwendigkeit für einzelne Eltern um jedes Element herum.

Cras justo odio Dapibus ac facilisis in Morbi leorisus Porta ac consectetur ac Vestibulum bei Eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Button-Elemente

Listengruppenelemente können Schaltflächen anstelle von Listenelementen sein (das bedeutet auch ein übergeordnetes Element <div>anstelle eines <ul>). Keine Notwendigkeit für einzelne Eltern um jedes Element herum. Verwenden Sie hier nicht die Standardklassen .btn.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Deaktivierte Elemente

Fügen Sie .disableda hinzu .list-group-item, um es auszugrauen und deaktiviert zu erscheinen.

Cras justo odio Dapibus ac facilisis in Morbi leorisus Porta ac consectetur ac Vestibulum bei Eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Kontextbezogener Unterricht

Verwenden Sie kontextabhängige Klassen, um standardmäßige oder verknüpfte Listenelemente zu gestalten. Enthält auch .activeZustand.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum bei Eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum bei Eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Benutzerdefinierte Inhalte

Fügen Sie fast jeden HTML-Code hinzu, sogar für verknüpfte Listengruppen wie die untenstehende.

Listengruppenelement-Überschrift

Donec id elit non mi porta gravida bei eget metus. Maecenas sed diam eget risus varius blandit.

Listengruppenelement-Überschrift

Donec id elit non mi porta gravida bei eget metus. Maecenas sed diam eget risus varius blandit.

Listengruppenelement-Überschrift

Donec id elit non mi porta gravida bei eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Obwohl es nicht immer notwendig ist, müssen Sie Ihr DOM manchmal in eine Box stecken. Probieren Sie in diesen Situationen die Panel-Komponente aus.

Einfaches Beispiel

Standardmäßig werden .panellediglich einige grundlegende Rahmen und Polsterungen angewendet, um Inhalte aufzunehmen.

Einfaches Panel-Beispiel

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Tafel mit Überschrift

Fügen Sie mit einfach einen Überschriftscontainer zu Ihrem Panel hinzu .panel-heading. Sie können auch beliebig einschließen <h1>- <h6>mit einer .panel-titleKlasse, um eine vorgefertigte Überschrift hinzuzufügen. Die Schriftgrößen von <h1>- <h6>werden jedoch von überschrieben .panel-heading.

Stellen Sie für eine korrekte Linkfärbung sicher, dass Sie Links in Überschriften innerhalb von platzieren .panel-title.

Panel-Überschrift ohne Titel

Panel-Inhalt

Titel des Panels

Panel-Inhalt

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel mit Fußzeile

Umbrechen Sie Schaltflächen oder sekundären Text in .panel-footer. Beachten Sie, dass Panel-Fußzeilen keine Farben und Rahmen erben, wenn Sie kontextbezogene Variationen verwenden, da sie nicht im Vordergrund stehen sollen.

Panel-Inhalt

Panel-Fußzeile

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Kontextuelle Alternativen

Wie bei anderen Komponenten können Sie ein Panel ganz einfach für einen bestimmten Kontext aussagekräftiger machen, indem Sie eine der kontextabhängigen Zustandsklassen hinzufügen.

Titel des Panels

Panel-Inhalt

Titel des Panels

Panel-Inhalt

Titel des Panels

Panel-Inhalt

Titel des Panels

Panel-Inhalt

Titel des Panels

Panel-Inhalt

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Mit Tabellen

Fügen Sie alle nicht umrandeten .tableinnerhalb eines Panels hinzu, um ein nahtloses Design zu erhalten. Wenn es ein gibt .panel-body, fügen wir oben in der Tabelle einen zusätzlichen Rand zur Trennung hinzu.

Panel-Überschrift

Einige Standard-Panel-Inhalte hier. Nulla vitae elit libero, ein pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Vorname	Nachname	Nutzername
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry	der Vogel	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Wenn kein Panel-Hauptteil vorhanden ist, bewegt sich die Komponente ohne Unterbrechung vom Panel-Header zur Tabelle.

Panel-Überschrift

#	Vorname	Nachname	Nutzername
1	Markieren	Otto	@mdo
2	Jacob	Dornton	@fett
3	Larry	der Vogel	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Mit Listengruppen

Integrieren Sie ganz einfach Listengruppen in voller Breite in jedes Panel.

Panel-Überschrift

Einige Standard-Panel-Inhalte hier. Nulla vitae elit libero, ein pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Morbi leorisus
Porta ac consectetur ac
Vestibulum bei Eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Ermöglichen Sie Browsern, die Abmessungen von Videos oder Diashows basierend auf der Breite ihres enthaltenden Blocks zu bestimmen, indem Sie ein intrinsisches Verhältnis erstellen, das auf jedem Gerät richtig skaliert wird.

Regeln werden direkt auf die Elemente <iframe>, <embed>, <video>und angewendet; <object>Verwenden Sie optional eine explizite Nachkommenklasse, .embed-responsive-itemwenn Sie den Stil für andere Attribute anpassen möchten.

Pro-Tipp! Sie müssen es nicht frameborder="0"in Ihre <iframe>s aufnehmen, da wir das für Sie überschreiben.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Standard gut

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="well">...</div>

Optionale Klassen

Steuerpolsterung und abgerundete Ecken mit zwei optionalen Modifikatorklassen.

Schau, ich bin in einem großen Brunnen!

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

Schau, ich bin in einem kleinen Brunnen!

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

Komponenten

Glyphicons

Verfügbare Glyphen

Wie benutzt man

Nicht mit anderen Komponenten mischen

Nur für leere Elemente

Ändern der Position der Symbolschrift

Zugängliche Symbole

Beispiele

Dropdowns

Beispiel

Ausrichtung

Kann eine zusätzliche Positionierung erfordern

Veraltete .pull-rightAusrichtung

Überschriften

Teiler

Menüpunkte deaktiviert

Schaltflächengruppen

QuickInfos und Popovers in Schaltflächengruppen erfordern spezielle Einstellungen

Stellen Sie sicher, dass es richtig ist role, und geben Sie ein Etikett an

Einfaches Beispiel

Schaltflächen-Symbolleiste

Dimensionierung

Verschachtelung

Vertikale Variation

Blocksatzgruppen

Umgang mit Grenzen

IE8 und Grenzen

Mit <a>Elementen

Links, die als Schaltflächen fungieren

Mit <button>Elementen

Schaltflächen-Dropdowns

Plugin-Abhängigkeit

Dropdown-Menüs mit einer einzigen Schaltfläche

Drop-downs für geteilte Schaltflächen

Dimensionierung

Dropup-Variante

Eingangsgruppen

Nur textuelle <input>s

QuickInfos und Popovers in Eingabegruppen erfordern spezielle Einstellungen

Nicht mit anderen Komponenten mischen

Fügen Sie immer Labels hinzu

Einfaches Beispiel

Dimensionierung

Kontrollkästchen und Radio-Addons

Schaltflächen-Add-Ons

Schaltflächen mit Dropdowns

Segmentierte Schaltflächen

Mehrere Tasten

Navis

Die Verwendung von Navs für Tab-Panels erfordert das JavaScript-Tabs-Plugin

Als Navigation verwendete Navigationsgeräte barrierefrei machen

Registerkarten

Pillen

Gerechtfertigt

Safari und reaktionsschnelle gerechtfertigte Navigationsgeräte

Links deaktiviert

Link-Funktionalität nicht beeinträchtigt

Verwenden von Dropdowns

Registerkarten mit Dropdowns

Pillen mit Dropdowns

Navigationsleiste

Standard-Navigationsleiste

Überlaufender Inhalt

Erfordert JavaScript-Plugin

Ändern des eingeklappten mobilen Navigationsleisten-Haltepunkts

Machen Sie Navigationsleisten zugänglich

Markenzeichen

Formen

Einschränkungen für Mobilgeräte

Fügen Sie immer Labels hinzu

Tasten

Kontextspezifische Verwendung

Text

Nicht-Navigationslinks

Komponentenausrichtung

Richtiges Ausrichten mehrerer Komponenten

Oben fixiert

Körperpolster erforderlich

Unten fixiert

Veraltete `.pull-right`Ausrichtung

Stellen Sie sicher, dass es richtig ist `role`, und geben Sie ein Etikett an

Mit `<a>`Elementen

Mit `<button>`Elementen

Nur textuelle `<input>`s