Komponenten
Mehr als ein Dutzend wiederverwendbare Komponenten, die erstellt wurden, um Ikonografie, Dropdowns, Eingabegruppen, Navigation, Warnungen und vieles mehr bereitzustellen.
Mehr als ein Dutzend wiederverwendbare Komponenten, die erstellt wurden, um Ikonografie, Dropdowns, Eingabegruppen, Navigation, Warnungen und vieles mehr bereitzustellen.
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 .
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.
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>
.
Symbolklassen sollten nur auf Elementen verwendet werden, die keinen Textinhalt enthalten und keine untergeordneten Elemente haben.
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:
@icon-font-path
und/oder @icon-font-name
Variablen in den Less-Quelldateien.url()
Pfade im kompilierten CSS.Verwenden Sie die Option, die am besten zu Ihrem spezifischen Entwicklungs-Setup passt.
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-only
Klasse 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-label
dem Steuerelement selbst ein Attribut hinzufügen.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
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-only
Text, um diesen Hinweis Benutzern von Hilfstechnologien mitzuteilen.
<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 .
Umschließen Sie den Auslöser des Dropdown-Menüs und das Dropdown-Menü .dropdown
mit 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 .dropup
sie 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>
Standardmäßig wird ein Dropdown-Menü automatisch 100 % von oben und entlang der linken Seite seines übergeordneten Elements positioniert. Fügen Sie .dropdown-menu-right
zu a .dropdown-menu
hinzu, um das Dropdown-Menü rechts auszurichten.
Dropdowns werden automatisch per CSS innerhalb des normalen Dokumentenflusses positioniert. Das bedeutet, dass Dropdowns von Eltern mit bestimmten Eigenschaften abgeschnitten werden können overflow
oder außerhalb der Grenzen des Darstellungsbereichs erscheinen. Gehen Sie diese Probleme eigenständig an, sobald sie auftreten.
.pull-right
AusrichtungAb v3.1.0 haben wir .pull-right
Dropdown-Menüs als veraltet markiert. Um ein Menü rechtsbündig auszurichten, verwenden Sie .dropdown-menu-right
. Rechts ausgerichtete Navigationskomponenten in der Navigationsleiste verwenden eine Mixin-Version dieser Klasse, um das Menü automatisch auszurichten. Um es zu überschreiben, verwenden Sie .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
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>
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>
Fügen Sie .disabled
a <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 .
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).
role
, und geben Sie ein Etikett anDamit unterstützende Technologien – wie z. B. Screenreader – vermitteln können, dass eine Reihe von Schaltflächen gruppiert sind, muss ein entsprechendes role
Attribut 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 role
Attribut vorhanden ist. In den hier bereitgestellten Beispielen verwenden wir aria-label
, aber es können auch Alternativen wie aria-labelledby
verwendet werden.
Umschließen Sie eine Reihe von Schaltflächen mit .btn
in .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>
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>
Platzieren Sie eines .btn-group
in 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>
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>
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.
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: -1px
verwendet, um die Ränder zu stapeln, anstatt sie zu entfernen. Funktioniert jedoch margin
nicht 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.
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.
<a>
ElementenWickeln Sie einfach eine Reihe von .btn
s in ein .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
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"
.
<button>
ElementenUm 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-group
und das richtige Menü-Markup bereitstellen.
Schaltflächen- Dropdowns erfordern, dass das Dropdown -Plug- in in Ihrer Version von Bootstrap enthalten ist.
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>
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>
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>
Auslösen von Dropdown-Menüs über Elementen durch Hinzufügen .dropup
zum ü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-group
ein .input-group-addon
oder .input-group-btn
, um Elemente einem einzelnen voranzustellen oder anzuhängen .form-control
.
<input>
sVermeiden 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 rows
Attribute in einigen Fällen nicht berücksichtigt werden.
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).
Mischen Sie Formulargruppen oder Rasterspaltenklassen nicht direkt mit Eingabegruppen. Verschachteln Sie die Eingabegruppe stattdessen innerhalb der Formulargruppe oder des rasterbezogenen Elements.
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-only
Verwendung des aria-label
, aria-labelledby
, aria-describedby
oder -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.title
placeholder
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-addon
oder .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>
Fügen Sie die relativen Größenklassen des Formulars zu .input-group
sich 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>
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 in Eingabegruppen sind etwas anders und erfordern eine zusätzliche Verschachtelungsebene. Anstelle von .input-group-addon
mü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 -->
<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 -->
<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>
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.
Beachten Sie , dass die Klasse die Basisklasse .nav-tabs
erfordert ..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>
Nehmen Sie denselben HTML-Code, aber verwenden Sie .nav-pills
stattdessen:
<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>
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.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Fügen Sie für jede Navigationskomponente (Tabs oder Pillen) .disabled
für graue Links und keine Hover-Effekte hinzu .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Fügen Sie Dropdown-Menüs mit etwas zusätzlichem HTML und dem Dropdown-JavaScript-Plugin hinzu .
<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>
<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.
<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-form
fü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-form
teilt es einen Großteil seines Codes mit .form-inline
via 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 die .navbar-btn
Klasse 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-link
Klasse, 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-left
oder aus. .navbar-right
Beide 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-left
und .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-top
ein .container
oder .container-fluid
hinzu, um den Inhalt der Navigationsleiste zu zentrieren und aufzufüllen.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Fügen Sie .navbar-fixed-bottom
ein .container
oder .container-fluid
hinzu, um den Inhalt der Navigationsleiste zu zentrieren und aufzufüllen.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Erstellen Sie eine Navigationsleiste in voller Breite, die mit der Seite wegscrollt, indem Sie .navbar-static-top
ein .container
oder 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>
Geben Sie die Position der aktuellen Seite innerhalb einer Navigationshierarchie an.
Trennzeichen werden in CSS automatisch durch :before
und hinzugefügt content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Stellen Sie Paginierungslinks für Ihre Website oder App mit der mehrseitigen Paginierungskomponente oder der einfacheren Pager-Alternative bereit .
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">«</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">»</span>
</a>
</li>
</ul>
</nav>
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-label
fü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"
.
Links sind für verschiedene Umstände anpassbar. Verwenden Sie .disabled
für nicht anklickbare Links und .active
um die aktuelle Seite anzuzeigen.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</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">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Lust auf größere oder kleinere Paginierung? Hinzufügen .pagination-lg
oder .pagination-sm
fü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>
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.
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>
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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Pager-Links verwenden auch die allgemeine .disabled
Utility-Klasse aus der Paginierung.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Fügen Sie eine der unten genannten Modifikatorklassen hinzu, um das Erscheinungsbild einer Beschriftung zu ändern.
<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>
Rendering-Probleme können auftreten, wenn Sie Dutzende von Inline-Labels in einem schmalen Container haben, die jeweils ihr eigenes inline-block
Element 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.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Wenn es keine neuen oder ungelesenen Elemente gibt, werden Badges einfach reduziert (über den CSS- :empty
Selektor), vorausgesetzt, dass darin kein Inhalt vorhanden ist.
Badges werden in Internet Explorer 8 nicht automatisch ausgeblendet, da der :empty
Selektor nicht unterstützt wird.
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.
Dies ist eine einfache Heldeneinheit, eine einfache Komponente im Jumbotron-Stil, um besondere Aufmerksamkeit auf bestimmte Inhalte oder Informationen zu lenken.
<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 .container
s und fügen Sie stattdessen ein .container
innerhalb hinzu.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Eine einfache Shell h1
zum angemessenen Platzieren und Segmentieren von Inhaltsabschnitten auf einer Seite. Es kann das h1
Standardelement small
von 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 .
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>
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.
<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.
Fügen Sie beliebigen Text und eine optionale Schaltfläche zum Schließen in .alert
eine der vier Kontextklassen (z. B. .alert-success
) für grundlegende Warnmeldungen ein.
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.
<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>
Bauen Sie auf jeder Warnung auf, indem Sie eine optionale .alert-dismissible
Schaltfläche zum Schließen hinzufügen.
Für voll funktionsfähige, verschließbare Warnungen müssen Sie das JavaScript-Plug -in für Warnungen verwenden .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Achten Sie darauf, das <button>
Element mit dem Datenattribut zu verwenden data-dismiss="alert"
.
Verwenden Sie die .alert-link
Utility-Klasse, um in jeder Warnung schnell übereinstimmende farbige Links bereitzustellen.
<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.
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.
Wenn Ihre Website über eine Content Security Policy (CSP) verfügt, die kein erlaubt style-src 'unsafe-inline'
, können Sie keine Inline- style
Attribute 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.
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>
Entfernen Sie die <span>
with .sr-only
-Klasse aus der Fortschrittsleiste, um einen sichtbaren Prozentsatz anzuzeigen.
<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-width
dem Fortschrittsbalken ein hinzufügen.
<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>
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>
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>
Fügen Sie hinzu .active
, .progress-bar-striped
um 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>
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.
Die Standardmedien zeigen ein Medienobjekt (Bilder, Video, Audio) links oder rechts von einem Inhaltsblock an.
<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-left
und .pull-right
sind 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-left
und .media-right
, außer dass .media-right
sie nach dem .media-body
in HTML platziert werden sollten.
Die Bilder oder andere Medien können oben, mittig oder unten ausgerichtet werden. Die Standardeinstellung ist oben ausgerichtet.
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.
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.
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>
Mit ein wenig zusätzlichem Markup können Sie Medien in Listen verwenden (nützlich für Kommentar-Threads oder Artikellisten).
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.
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.
<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>
Fügen Sie die Badge-Komponente zu einem beliebigen Listengruppenelement hinzu und sie wird automatisch rechts positioniert.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
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.
<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>
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>
Fügen Sie .disabled
a hinzu .list-group-item
, um es auszugrauen und deaktiviert zu erscheinen.
<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>
Verwenden Sie kontextabhängige Klassen, um standardmäßige oder verknüpfte Listenelemente zu gestalten. Enthält auch .active
Zustand.
<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>
Fügen Sie fast jeden HTML-Code hinzu, sogar für verknüpfte Listengruppen wie die untenstehende.
Donec id elit non mi porta gravida bei eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida bei eget metus. Maecenas sed diam eget risus varius blandit.
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.
Standardmäßig werden .panel
lediglich einige grundlegende Rahmen und Polsterungen angewendet, um Inhalte aufzunehmen.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
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-title
Klasse, 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
.
<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>
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.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
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.
<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>
Fügen Sie alle nicht umrandeten .table
innerhalb 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.
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 |
<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.
# | Vorname | Nachname | Nutzername |
---|---|---|---|
1 | Markieren | Otto | @mdo |
2 | Jacob | Dornton | @fett |
3 | Larry | der Vogel |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Integrieren Sie ganz einfach Listengruppen in voller Breite in jedes Panel.
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.
<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-item
wenn 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>
Verwenden Sie den Brunnen als einfachen Effekt für ein Element, um ihm einen Einfügungseffekt zu verleihen.
<div class="well">...</div>
Steuerpolsterung und abgerundete Ecken mit zwei optionalen Modifikatorklassen.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>