Komponenten
Mehr als ein Dutzend Komponenten für Symbole, Menüs, Input-Gruppen, Navigation, Warnungen und vieles mehr.
Mehr als ein Dutzend Komponenten für Symbole, Menüs, Input-Gruppen, Navigation, Warnungen und vieles mehr.
Dabei sind mehr als 250 Icons in Form einer Schriftart aus den Glyphicons Halflings. Glyphicons Halflings sind normalerweise nicht kostenlos erhältlich, aber ihr Erfinder hat sie für Bootstrap gratis verfügbar gemacht. Als Dankeschön bitten wir dich nur, wo immer möglich einen Link zu den Glyphicons einzubinden.
Aus Gründen der Performance benötigen alle Icons eine Grundklasse und eine weitere Klasse für das jeweilige Icon. Um ein Icon zu werwenden, platziere einfach den folgenden Code fast überall wo du willst. Denk daran, ein Leerzeichen zwischen Icon und eventuellem Text zu lassen, damit die Icons einen angemessenen Abstand haben.
Icon-Klassen können nicht direkt mit anderen Komponenten kombiniert werden. Sie sollten niemals mit anderen Klassen auf das selbe Element angewendet werden. Füge stattdessen ein untergeordnetes <span>
ein und wende die Icon-Klassen auf dieses <span>
an.
Icon-Klassen sollten nur auf Elemente angewendet werden, die weder Text noch untergeordnete Elemente enthalten.
Bootstrap erwartet, dass sich die Dateien für die Symbole im Verzeichnis /fonts/
relativ zu den kompilierten CSS-Dateien befinden. Ein Verschieben oder Umbenennen dieser Schriftarten-Dateien bedeutet, dass du das CSS über einen von drei Wegen aktualisieren musst:
@icon-font-path
und/oder @icon-font-name
in den Less-Quelldateien.url()
-Pfade im kompilierten CSS.Verwende die Option, die am besten zu deiner spezifischen Umwicklungseinrichtung passt.
Moderne Versionen von assistiven Technologien geben CSS-generierten Inhalt und spezifische Unicode-Zeichen wieder. Um ungewollte und verwirrende Ausgaben in Screenreadern zu vermeiden (insbesondere wenn Icons nur zur Dekoration verwendet werden), verstecken wir diese mit dem Attribut aria-hidden="true"
.
Falls du ein Icon verwendest, um etwas zu vermitteln (im Kontrast zu einer rein dekorativen Verwendung), achte darauf, dass die Bedeutung auch über assistive Technologien vermittelt wird, z.B. solltest du zusätzlichen Inhalt hinzufügen, den du mit der Klasse .sr-only
unsichtbar machen kannst.
Falls du Schaltflächen ohne anderen Text (z.B. einen <button>
, der nur ein Icon enthält) erstellst, solltest du immer alternativen Inhalt bereitstellen, um den Zweck der Schaltfläche zu identifizieren, so dass diese für Nutzer von assistiven Technologien Sinn macht. In diesem Fall könntest du ein aria-label
-Attribut zur Schaltfläche selbst hinzufügen.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Du kannst Glyphicons prima in Buttons, Button-Gruppen für eine Toolbar, Navigation oder Formularfeldern mit Präfix verwenden.
<button type="button" class="btn btn-default" aria-label="Links ausrichten">
<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> Markieren
</button>
Du kannst ein Icon in einem Warnhinweis verwenden, um zu vermitteln, dass es sich um eine Fehlermeldung handelt. Nutze zusätzlichen .sr-only
-Text, um diese Tatsache auch an Nutzer von assistiven Technologien zu vermitteln.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Fehler:</span>
Gib eine gültige Email-Adresse ein
</div>
Ein- und ausblendbare Kontext-Menüs, mit denen du Listen von Links anzeigen kannst. Mit dem Dropdown-JavaScript-Plugin wird's interaktiv.
Pack den Auslöser eines Dropdowns und das eigentliche Menü in .dropdown
oder ein anderes Element, das position: relative;
deklariert. Dann kannst du die eigentlichen Menü-Einträge hinzufügen.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown-Menü
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Aktion</a></li>
<li><a href="#">Andere Aktion</a></li>
<li><a href="#">Irgendwas anderes</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Abgetrennter Link</a></li>
</ul>
</div>
Dropdown-Menüs können verändert werden, so dass sie nach oben (statt nach unten) aufklappen, indem du .dropup
zum übergeordneten Element hinzufügst.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropup-Menü
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Aktion</a></li>
<li><a href="#">Andere Aktion</a></li>
<li><a href="#">Irgendwas anderes</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Abgetrennter Link</a></li>
</ul>
</div>
Jedes Dropdown-Menü wird normalerweise 100% von oben und entlang der linken Seite seines übergeordneten Elements platziert. Du kannst es stattdessen nach rechts ausrichten, indem du .dropdown-menu-right
zu einem .dropdown-menu
hinzufügst.
Dropdowns werden automatisch via CSS im normalen Dokumentenfluss positioniert. Das bedeutet, dass Dropdowns von ihren übergeordneten Elementen mit bestimmten overflow
-Eigenschaften abgeschnitten werden können oder dass sie außerhalb des angezeigten Bereichs erscheinen können. Gehe diese Probleme selbst an, wenn sie auftreten.
.pull-right
veraltetWir haben mit v3.1.0 die Verwendung von .pull-right
bei Dropdown-Menüs als veraltet markiert. Um ein Menü nach rechts auszurichten, solltest du ab sofort nur noch .dropdown-menu-right
nutzen. Werden Komponenten in der Navbar rechts ausgerichtet, wird auch das Menü über ein Mixin dieser Klasse automatisch ausgerichtet. Um dies zu überschreiben musst du .dropdown-menu-left
verwenden.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Füge eine Überschrift hinzu, um verschiedene Aktionen in einem Dropdown-Menü zu gruppieren.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown-Überschrift</li>
...
</ul>
Füge einen Trennstrich hinzu, um eine Reihe von Links in einem Dropdown-Menü abzutrennen.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Füge .disabled
zu einem <li>
-Element im Dropdown hinzu, um den Link zu deaktivieren.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Normaler Link</a></li>
<li class="disabled"><a href="#">Deaktivierter Link</a></li>
<li><a href="#">Noch ein Link</a></li>
</ul>
Gruppiere eine Reihe von Buttons zusammen in einer Zeile mit der Hilfe von Button-Gruppen. Füge optionale Auswahlfeld-Funktionalität mit unserem Buttons-Plugin hinzu.
Wenn du Tooltips oder Popovers an Elementen in einer .btn-group
verwendest, musst du die Option container: 'body'
festlegen, um unerwünschte Nebeneffekte zu vermeiden (das Element könnte z.B. breiter werden und/oder seine abgerundeten Ecken verlieren, wenn der Tooltip oder das Popover ausgelöst wird).
role
und stelle ein Label zur VerfügungDamit assistive Technologien wie Screenreader vermitteln können, dass eine Reihe von Buttons gruppiert ist, muss ein passendes role
-Attribut zur Verfügung gestellt werden. Für Button-Gruppen ist das role="group"
, während Werkzeugleisten role="toolbar"
haben sollten.
Eine Ausnehme sind Gruppen, die nur eine einzige Schaltfläche enthalten (z.B. gleichmäßige Button-Gruppen mit <button>
-Elementen) oder ein Dropdown-Menü.
Außerdem sollte Gruppen und Werkzeugleisten ein aussagekräftiges Label gegeben werden, da die meisten assistiven Technologien sie anderenfalls dem Nutzer nicht wiedergeben werden, auch wenn das richtige role
-Attribut präsent ist. In den Beispielen unten verwenden wir aria-label
, aber Alternativen wie aria-labelledby
können auch verwendet werden.
Verpacke eine Reihe von Buttons mit .btn
in einer .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Links</button>
<button type="button" class="btn btn-default">Mitte</button>
<button type="button" class="btn btn-default">Rechts</button>
</div>
Kombiniere mehrere <div class="btn-group">
in einer <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 die Button-Größen-Klassen zu jedem Button in einer Gruppe hinzuzufügen, kannst du einfach .btn-group-*
zu jeder .btn-group
hinzufügen, auch wenn du mehrere Gruppen verschachtelst.
<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>
Platziere eine .btn-group
in einer anderen .btn-group
wenn du Dropdown-Menüs mit einer Reihe von Buttons kombinieren willst.
<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-Menü
<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>
Du kannst eine Reihe von Buttons auch vertikal statt horizontal anordnen. Unterteilte Button-Dropdowns werden hier nicht unterstützt.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Lass eine Gruppe von Buttons die gesamte Größe des übergeordneten Elements einnehmen, indem jeder Button den gleichen Anteil der Button-Gruppe einnimmt. Funktioniert auch mit Button-Dropdowns in der Button-Gruppe.
Aufgrund von sehr spezifischem HTML und CSS zur gleichmäßigen Verteilung der Buttons (vor allem display: table-cell
) verdoppelt sich die Rahmengrenze zwischen den Buttons. In normalen Button-Gruppen wird dies mit margin-left: -1px
behoben. Leider funktioniert margin
nicht mit display: table-cell
. Abhängig davon, wie sehr du Bootstrap angepasst hast, solltest du daher eventuell die Rahmenlinien an dieser Stelle entfernen oder ihnen eine andere Farbe geben.
Internet Explorer 8 rendert keine Rahmen bei Buttons in gleichmäßigen Button-Gruppen, unabhängig vom verwendeten Element. Um das zu umgehen, verpacke jeden Button in einer Extra-Gruppe.
Siehe #12476 für mehr Informationen.
<a>
-ElementenVerpacke eine Reihe von .btn
s einfach in .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Falls <a>
-Elemente als Buttons verwendet werden, also um Funktionen auf der gleichen Seite zu aktivieren statt zu einem anderen Dokument oder Bereich auf der gleichen Seite zu navigieren, sollten diese auch die passende role="button"
erhalten.
<button>
-ElementenUm gleichmäßig verteilte Button-Gruppen mit <button>
-Elementen zu verwenden, musst du jeden Button in einer Button-Gruppe verpacken. Die meisten Browser wenden unser CSS für den Gleichsatz nicht richtig auf <button>
-Elemente an, aber da wir Button-Dropdown-Menüs unterstützen, können wir das Problem 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">Links</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Mitte</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Rechts</button>
</div>
</div>
Du kannst beliebige Buttons verwenden, um ein Dropdown-Menü zu öffnen und zu schließen, indem du den Button in einer .btn-group
platzierst und das Markup für das Menü hinzufügst.
Button-Dropdowns benötigen das Dropdown-Plugin in deiner Bootstrap-Version.
Verwandel einen Button in einen Menü-Schalter mit ein paar einfachen Markup-Änderungen.
<!-- Einzelner Button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Aktion <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Aktion</a></li>
<li><a href="#">Andere Aktion</a></li>
<li><a href="#">Irgendwas anderes</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Abgetrennter Link</a></li>
</ul>
</div>
Auf ähnliche Weise kannst du Button-Dropdowns erstellen, bei denen der Menü-Schalter von einem eigentlichen Button abgetrennt ist.
<!-- Abgetrennter Button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Aktion</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">Menü ein-/ausblenden</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Aktion</a></li>
<li><a href="#">Andere Aktion</a></li>
<li><a href="#">Irgendwas anderes</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Abgetrennter Link</a></li>
</ul>
</div>
Button-Dropdowns funktionieren mit Buttons in allen Größen.
<!-- Große Button-Gruppe -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Großer Button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Kleine Button-Gruppe -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Kleiner Button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra-kleine Button-Gruppe -->
<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-kleiner Button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Öffne und schließe Menüs über anderen Elementen, indem du .dropup
zum übergeordneten Element hinzufügst.
<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">Menü ein-/ausblenden</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown-Menü-Links -->
</ul>
</div>
Erweitere Formular-Felder, indem du Text oder Buttons vor, nach oder auf beiden Seiten von text-basierten Eingabefeldern (<input>
s) hinzufügst. Verwende .input-group
mit einem .input-group-addon
oder .input-group-btn
, um Elemente bei einem einzelnen .form-control
vor- bzw. nachzustellen.
<input>
sDu solltest hier keine <select>
-Elemente verwenden, da diese in WebKit-Browsern nicht ausreichend gestaltet werden können.
Du solltest hier keine <textarea>
-Elemente verwenden, da deren Attribut rows
in einigen Fällen nicht beachtet wird.
Wenn du Tooltips oder Popovers an Elementen in einer .input-group
verwendest, musst du die Option container: 'body'
festlegen, um unerwünschte Nebeneffekte zu vermeiden (das Element könnte z.B. breiter werden und/oder seine abgerundeten Ecken verlieren, wenn der Tooltip oder das Popover ausgelöst wird).
Kombiniere Klassen für Formular-Gruppen oder Rasterspalten nicht direkt mit Input-Gruppen. Ordne die Input-Gruppe stattdessen einer Formular-Gruppe oder einem Rasterelement unter.
Screenreader werden Probleme mit deinen Formularen haben, wenn du nicht für jedes Feld ein Label einfügst. Du solltest für diese Input-Gruppen sicherstellen, dass zusätzliche Labels oder Funktionen an Assistive Technologien vermittelt werden.
Die genaue Technik, mit der du dies tust (sichtbare <label>
-Elemente, die mit der Klasse .sr-only
verborgen werden oder die Verwendung der Attribute aria-label
, aria-labelledby
, title
oder placeholder
) und welche zusätzlichen Informationen du vermitteln musst, wird abhängig vom genauen Typ des Widgets, das du entwickelst, variieren. Die Beispiele in diesem Abschnitt stellen einige vorgeschlagene, fallspezifische Ansätze zur Verfügung.
Platziere ein Add-on oder einen Button auf einer Seite eines Feldes. Du kannst auch jeweils eins auf beiden Seiten des Feldes platzieren.
Mehrere Add-ons auf einer Seite (.input-group-addon
oder .input-group-btn
) werden nicht unterstützt.
Mehrere Eingabefelder in einer einzelnen Input-Gruppe werden nicht unterstützt.
<div class="input-group">
<span class="input-group-addon" id="einfaches-addon1">@</span>
<input type="text" class="form-control" placeholder="Benutzername" aria-describedby="einfaches-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Empfänger-Benutzername" aria-describedby="einfaches-addon2">
<span class="input-group-addon" id="einfaches-addon2">@beispiel.de</span>
</div>
<div class="input-group">
<span class="input-group-addon">€</span>
<input type="text" class="form-control" aria-label="Summe (gerundet zum nächsten ganzen Euro)">
<span class="input-group-addon">,00</span>
</div>
<label for="basic-url">Deine Profil-URL</label>
<div class="input-group">
<span class="input-group-addon" id="einfaches-addon3">https://example.com/profil/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="einfaches-addon3">
</div>
Füge die Größen-Klassen für Formulare einfach zur .input-group
selbst hinzu und die enthaltenen Elemente werden automatisch angepasst—du musst die Klassen nicht für jedes Element einzeln wiederholen.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="groessen-addon1">@</span>
<input type="text" class="form-control" placeholder="Benutzername" aria-describedby="groessen-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="groessen-addon2">@</span>
<input type="text" class="form-control" placeholder="Benutzername" aria-describedby="groessen-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="groessen-addon3">@</span>
<input type="text" class="form-control" placeholder="Benutzername" aria-describedby="groessen-addon3">
</div>
Platziere eine Checkbox (Häkchen-Auswahlfeld) oder einen Radio-Button (Auswahlfeld für eine Option von mehreren) statt Text im Add-on einer Input-Gruppe.
<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 -->
Buttons in Input-Gruppen sind etwas anders und brauchen eine zusätzliche Ebene der Verschachtelung. Statt .input-group-addon
musst du .input-group-btn
verwenden, um die Buttons zu umschließen. Dies ist notwendig, da sonst Standard-Stile im Browser 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">Los!</button>
</span>
<input type="text" class="form-control" placeholder="Suche nach...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Suche nach...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Los!</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">Aktion <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Aktion</a></li>
<li><a href="#">Andere Aktion</a></li>
<li><a href="#">Irgendwas anderes</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Abgetrennter 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">Aktion <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Aktion</a></li>
<li><a href="#">Andere Aktion</a></li>
<li><a href="#">Irgendwas anderes</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Abgetrennter 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 und Dropdown-Menü -->
</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 und Dropdown-Menü -->
</div>
</div>
Du kannst zwar nur ein Add-on pro Seite verwenden, aber mehrere Buttons innerhalb einer einzelnen .input-group-btn
funktionieren.
<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>
Navs sind einfache Komponenten in Bootstrap, mit denen du verschiedene Bereiche deines Projekts verlinken kannst. Ausgehend von der grundlegenden .nav
-Klasse kannst du verschiedene zusätzliche Klassen hinzufügen und austauschen, um verschiedene Designs anzuwenden.
Beachte, dass die .nav-tabs
-Klasse nur zusammen mit der .nav
-Grund-Klasse funktioniert.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Start</a></li>
<li role="presentation"><a href="#">Profil</a></li>
<li role="presentation"><a href="#">Nachrichten</a></li>
</ul>
Nimm den gleichen HTML-Code aber verwende stattdessen .nav-pills
:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Start</a></li>
<li role="presentation"><a href="#">Profil</a></li>
<li role="presentation"><a href="#">Nachrichten</a></li>
</ul>
Pills können auch übereinander angeordnet werden. Füge einfach .nav-stacked
hinzu.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Lass Tabs oder Pills mit .nav-justified
den Platz ihres übergeordneten Elements ganz einfach vollständig einnehmen, sobald die Bildschirmbreite 768px überschreitet. Auf kleineren Bildschirmen werden die Nav-Links übereinander angezeigt.
Gleichmäßig verteilte Nav-Links werden zurzeit in der Navbar nicht unterstützt.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Füge .disabled
zu einem Eintrag in irgendeiner Nav-Komponente (Tabs oder Pills) hinzu für graue Links und deaktivierte Hover-Effekte.
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Deaktivierter Link</a></li>
...
</ul>
Mit ein bisschen mehr HTML und dem Dropdowns-JavaScript-Plugin kannst du Dropdown-Menüs zu Navs hinzufügen.
<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-Menü <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-Menü <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Navbars sind anpassungsfähige Meta-Komponenten, die zur übergeordneten Navigation für deine Anwendung oder Site dienen. Sie beginnen auf mobilen Geräten minimiert (und können ein-/ausgeklappt werden) und werden dann horizontal, wenn die Breite des Bildschirms größer wird.
Gleichmäßig verteilte Nav-Links werden zurzeit in der Navbar nicht unterstützt.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
<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">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Titel</a>
</div>
<!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
<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">(aktuell)</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">Menü <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Aktion</a></li>
<li><a href="#">Andere Aktion</a></li>
<li><a href="#">Irgendwas anderes</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Abgetrennter Link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Noch ein abgetrennter Link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Suchen">
</div>
<button type="submit" class="btn btn-default">Los</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">Menü <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Aktion</a></li>
<li><a href="#">Andere Aktion</a></li>
<li><a href="#">Irgendwas anderes</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Abgetrennter Link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Ersetze den Titel in der Navbar mit deinem eigenen Bild, indem du den Text mit einem <img>
tauschst. Da .navbar-brand
eigene Abstände und eine feste Höhe hat, musst du abhängig von deinem Bild eventuell einiges CSS überschreiben.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Titel" src="...">
</a>
</div>
</div>
</nav>
Formulare müssen für eine korrekte Ausrichtung und sinnvolles Verhalten auf kleinen Bildschirmen in .navbar-form
platziert werden. Nutze die Ausrichtungsoptionen, um zu entscheiden, wo das Formular sich in der Navbar befinden soll.
Ein Hinweis: .navbar-form
importiert viel Code von .form-inline
über ein Mixin. Einige Felder, wie Input-Gruppen, benötigen eventuell feste Breiten, um vernünftig angezeigt zu werden.
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Suchen">
</div>
<button type="submit" class="btn btn-default">Los</button>
</form>
Füge die Klasse .navbar-btn
zu <button>
-Elementen hinzu, die nicht in einem <form>
sind, um sie in der Navbar vertikal zu zentrieren.
<button type="button" class="btn btn-default navbar-btn">Anmelden</button>
Umschließe Text mit .navbar-text
, typischerweise über ein <p>
-Tag, für angemessene Abstände und Farben.
<p class="navbar-text">Angemeldet als Mark Otto</p>
Wenn du normale Links außerhalb von normalen Navigations-Komponenten verwenden willst, nimm die Klasse .navbar-link
, um die richtigen Farben für Standard- und invertierte Navbar anzuwenden.
<p class="navbar-text navbar-right">Angemeldet als <a href="#" class="navbar-link">Mark Otto</a></p>
Du kannst Navigationslinks, Formulare, Buttons oder Text mit Hilfe der Hilfsklassen .navbar-left
oder .navbar-right
ausrichten. Beide Klassen legen einen CSS-Float in die angegebene Richtung fest. Als Beispiel, um Navigationslinks auszurichten, platziere diese in einer separaten <ul>
, auf die die jeweilige Klasse angewendet ist.
Diese Klassen werden über ein Mixin von .pull-left
und .pull-right
erzeugt, sind aber an Media Queries gebunden, damit die Ausrichtung auf verschiedenen Geräten stimmig bleibt.
Füge .navbar-fixed-top
hinzu und denke an einen .container
oder .container-fluid
, um den Navbar-Inhalt zu zentrieren und mit passenden Abständen zu versehen.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Füge .navbar-fixed-bottom
hinzu und denke an einen .container
oder .container-fluid
, um den Navbar-Inhalt zu zentrieren und mit passenden Abständen zu versehen.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Erstelle mit .navbar-static-top
eine Navbar, die die ganze Breite einnimmt, aber mit der Seite wegscrollt. Denke auch hier an einen .container
oder .container-fluid
, um den Navbar-Inhalt zu zentrieren und mit passenden Abständen zu versehen.
Anders als bei den .navbar-fixed-*
-Klassen musst du in diesem Fall kein Padding zum body
hinzufügen.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Verändere das Aussehen der Navbar, indem du .navbar-inverse
hinzufügst.
<nav class="navbar navbar-inverse">
...
</nav>
Zeige an, wo sich die aktuelle Seite in einer Navigationshierarchie befindet.
Unterteiler werden in CSS automatisch über :before
und content
hinzugefügt.
<ol class="breadcrumb">
<li><a href="#">Start</a></li>
<li><a href="#">Bibliothek</a></li>
<li class="active">Daten</li>
</ol>
Biete auf deiner Site oder Anwendung Links zu verschiedenen nummerierten Seiten mit der Pagination-Komponente oder der einfacheren Pager-Alternative an.
Einfache Seiten-Nummerierung, inspiriert von Rdio, super für Apps und Suchergebnisse. Der große Block ist schwer zu verfehlen, leicht skalierbar und bietet große Klick-Bereiche.
<nav aria-label="Seitennavigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Zurück">
<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="Weiter">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Die Pagination-Komponente sollte in einem <nav>
-Element sein, um sie für Screenreader und andere assistive Technologien als Navigationsabschnitt zu identifizieren. Da eine Seite wahrscheinlich oft mehr als eine Navigation hat (z.B. die Hauptnavigation im Header oder eine Seitennavigation), ist es empfehlenswert, ein beschreibendes aria-label
beim <nav>
zu ergänzen, das den Zweck erläutert. Beispiel: Falls die Paginatin-Komponente eingesetzt wird, um zwischen einer Reihe von Suchergebnissen zu navigieren, könnte aria-label="Suchergebnissseiten"
ein passendes Label sein..
Links sind für verschiedene Umstände anpassbar. Verwende .disabled
für nicht-klickbare Links und .active
, um die aktuelle Seite zu markieren.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Zurück"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(aktuell)</span></a></li>
...
</ul>
</nav>
Wir empfehlen dir, aktive oder deaktivierte Anchors durch <span>
zu ersetzen oder die Anchors im Fall von Zurück/Weiter-Pfeilen weglassen, um Klick-Funktionalität zu entfernen und dennoch die gewünschten 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">(aktuell)</span></span>
</li>
...
</ul>
</nav>
Du möchtest die Komponente lieber in kleiner oder größer haben? Füge .pagination-lg
oder .pagination-sm
für weitere Größen hinzu.
<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>
Einfache Links zur vorherigen und nächsten Seite mit wenig Markup und Stilen. Perfekt für simple Seiten wie Blogs oder Magazine.
Links im Pager sind standardmäßig zentriert.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Vorherige</a></li>
<li><a href="#">Nächste</a></li>
</ul>
</nav>
Alternativ kannst du die Links auch gegenüber an den Seiten ausrichten:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Älter</a></li>
<li class="next"><a href="#">Neuer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Pager-Links nutzen außerdem die allgemeine Hilfsklasse .disabled
wie bei der Pagination.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Älter</a></li>
<li class="next"><a href="#">Neuer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Überschrift <span class="label label-default">Neu</span></h3>
Füge irgendeine der unten genannten zusätzlichen Klassen hinzu, um das Aussehen eines Labels anzupassen.
<span class="label label-default">Standard</span>
<span class="label label-primary">Primär</span>
<span class="label label-success">Erfolg</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warnung</span>
<span class="label label-danger">Gefahr</span>
Rendering-Probleme können auftreten, wenn du Dutzende von Inline-Labels, die jeweils ein inline-block
-Element wie ein Icon enthalten, in einen engen Container einschließt. Setze das Label auf display: inline-block;
, um das zu umgehen. Für Kontext und ein Beispiel, siehe #13219.
Füge <span class="badge">
zu Links, Bootstrap-Navs und mehr hinzu, um neue oder ungelesene Einträge hervorzuheben.
<a href="#">Posteingang <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Nachrichten <span class="badge">4</span>
</button>
Wenn es keine neuen oder ungelesenen Objekte gibt, verschwinden Badges einfach (über den :empty
-Selektor in CSS), solange wirklich kein Inhalt darin vorhanden ist.
Badges werden im Internet Explorer 8 nicht automatisch verschwinden, da dieser :empty
nicht unterstützt.
Da passende Stile eingebaut sind, kannst du Badges ohne Probleme zusammen mit der aktiven Ansicht in Pills-Navs verwenden.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Start <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profil</a></li>
<li role="presentation"><a href="#">Nachrichten <span class="badge">3</span></a></li>
</ul>
Eine leichte, flexible Komponente, die optional die gesamte Breite der Seite einnehmen kann, um wichtige Inhalte auf deiner Seite besonders zu präsentieren.
Dies ist ein einfaches Jumbotron, eine simple Komponente im Stil von Großbilschirmen, die du verwenden kannst, um Aufmerksamkeit auf exklusiv vorgestellte Inhalte oder Informationen zu lenken.
<div class="jumbotron">
<h1>Hallo Welt!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Mehr erfahren</a></p>
</div>
Damit das Jumbotron die ganze Breite einnimmt und keine abgerundeten Ecken mehr hat, platziere es außerhalb von jeglichen .container
n und füge stattdessen einen .container
im Jumbotron hinzu.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Eine einfache Hülle, um ein h1
für angemessenen Abstand zwischen Abschnitten auf einer Seite zu verwenden. Sie kann das normale small
-Element des h1
sowie die meisten anderen Komponenten (mit zusätzlichen Stilen) enthalten.
<div class="page-header">
<h1>Beispiel-Seiten-Überschrift <small>Untertitel</small></h1>
</div>
Mit der Vorschaubild-Komponente kannst du Bootstraps Raster-System erweitern, um ganz leicht ein Raster von Bildern, Videos, Text und mehr anzuzeigen.
Falls du auf der Suche nach Vorschaubildern bist, die wie bei Pinterest mit unterschiedlichen Höhen und/oder Breiten angezeigt werden, musst du ein Drittanbieter-Plugin wie Masonry, Isotope oder Salvattore verwenden.
Standardmäßig sind Bootstraps Vorschaubilder entworfen, um verlinkte Bilder mit nur wenig Markup zu präsentieren.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Mit nur ein bisschen mehr Markup kannst du alle möglichen HTML-Inhalte wie Überschriften, Absätze oder Buttons in Vorschaubilder integrieren.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Vorschaubild-Titel</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>
Stelle mit den verschiedenen flexiblen Warnhinweisen Rückmeldungen mit Kontext für typische Benutzeraktionen zur Verfügung.
Verpacke Text und einen optionalen Schließen-Button in .alert
und eine der vier Kontext-Klassen (z.B. .alert-success
) für ganz einfache Warnhinweise.
Warnhinweise verfügen nicht über eine Standard-Klasse, sondern nur über die grundlegende und weitere zusätzliche Kontextklassen. Ein grauer Standard-Hinweis hat nicht so viel Sinn, daher musst du einen Typ über die Kontextklasse angeben. Wähle aus success, info, warning oder danger.
<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>
Baue einen Warnhinweis aus, indem du optional .alert-dismissible
und einen Schließen-Button hinzufügst.
Damit Warnhinweise tatsächlich geschlossen werden können, musst du das JavaScript-Plugin für Warnhinweise verwenden.
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-label="Schließen"><span aria-hidden="true">×</span></button>
<strong>Warnung!</strong> Du siehst ganz blass aus, ist alles in Ordnung?
</div>
Du solltest immer das <button>
-Element mit dem data-dismiss="alert"
-data-Attribut verwenden.
Verwende die Hilfsklasse .alert-link
, um ganz leicht passende Farben zu Links in irgendeinem Warnhinweis hinzuzufügen.
<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>
Präsentiere aktuelle Informationen über den Fortschritt eines Vorgangs oder einer Aktion mit diesen simplen und dennoch flexiblen Verlaufsleisten.
Verlaufsleisten verwenden CSS3-Übergänge und -Animationen, um einige ihrer Effekte umzusetzen. Diese Funktionen sind in Internet Explorer 9 und älter und in einigen älteren Versionen von Firefox nicht vorhanden. Opera 12 bietet keine Unterstützung für Animationen.
Falls deine Webseite eine Content Security Policy (CSP) hat, die style-src 'unsafe-inline'
nicht erlaubt, kannst du die Breite von Verlaufsleisten nicht über Inline-style
-Attribute festlegen (wie in den Beispielen unten gezeigt). Um trotz strenger CSPs mit Verlaufsleisten arbeiten zu können, musst du mit etwas selbstgeschriebenem JavaScript (das element.style.width
setzt) oder eigenen CSS-Klassen arbeiten.
Standard-Verlaufsleiste.
<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% abgeschlossen</span>
</div>
</div>
Entferne das Tag <span>
mit der Klasse .sr-only
innerhalb des Fortschrittbalkens, um eine Prozentzahl sichtbar zu machen. Bei niedrigen Prozenten ist es unter Umständen sinnvoll, eine min-width
hinzuzufügen, damit der Label-Text vollständig sichtbar ist.
<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 Labeltext auch bei niedrigen Prozentwerten lesbar bleibt, überlege dir, eine min-width
zur Verlaufsleiste hinzuzufü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>
Verlaufsanzeigen nutzen ähnlich wie Buttons und Warnhinweise zusätzliche Klassen, um einige Kontext-Farben hinzuzufügen.
<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% abgeschlossen (Erfolg)</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% abgeschlossen</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% abgeschlossen (Warnung)</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% abgeschlossen (Gefahr)</span>
</div>
</div>
Mit einem Farbverlauf wird ein gestreifter Effekt hinzugefügt. Nicht verfügbar in IE9 und älter.
<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% abgeschlossen (Erfolg)</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% abgeschlossen</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% abgeschlossen (Warnung)</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% abgeschlossen (Gefahr)</span>
</div>
</div>
Füge .active
zu .progress-bar-striped
hinzu, um die Streifen von rechts nach links zu animieren. Nicht verfügbar in IE9 und älteren Versionen.
<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% abgeschlossen</span>
</div>
</div>
Platziere mehrere Leisten im selben .progress
, um sie aneinanderzureihen.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% abgeschlossen (Erfolg)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% abgeschlossen (Warnung)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% abgeschlossen (Gefahr)</span>
</div>
</div>
Abstrakte Stile für Objekte, mit denen du verschiedene Komponenten (wie Blog-Kommentare, Tweets, usw.) erstellen kannst, die ein links oder rechts ausgerichtetes Bild neben Text-Inhalt enthalten.
Die normalen Medien-Objekte zeigen ein Medienobjekt (Bilder, Video, Ton) links oder rechts vom Inhalt 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">Medien-Überschrift</h4>
...
</div>
</div>
Die Klassen .pull-left
and .pull-right
gibt es ebenfalls und sie wurden zuvor als Teil der Medien-Komponente verwendet, sind aber für diese Art der Verwendung ab v3.3.0 als veraltet markiert. Sie haben ungefähre Gegenstücke in .media-left
und .media-right
, abgesehen davon, dass .media-right
im HTML nach dem .media-body
platziert werden sollte.
Die Bilder oder anderen Medien können oben, mittig oder unten ausgerichtet werden. Der Standard ist eine Ausrichtung oben.
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">Mittig ausgerichtet</h4>
...
</div>
</div>
Mit etwas mehr Markup kannst du Medien-Objekte in einer Liste verwenden (hilfreich 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">Medien-Überschrift</h4>
...
</div>
</li>
</ul>
Listengruppen sind eine flexible und umfangreiche Komponente für die Anzeige von mehr als simplen Listen von Elementen, nämlich komplexen Versionen davon mit eigenem Inhalt.
Die einfachste Variante der Listengruppe ist einfach eine unsortierte Liste mit Listen-Einträgen (<li>
) und den jeweiligen Klassen. Erweiter dieses Basis mit den folgenden Optionen oder füge deine eigenen Stile hinzu, wenn du sie brauchst.
<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>
Wenn du Badges zu Einträgen in einer Listengruppe hinzufügst, werden diese automatisch ganz rechts positioniert.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Verlinke die Einträge in Listengruppen, indem du Anchor-Tags (<a>
) statt Listen-Einträgen (<li>
) und als übergeordnetes Element ein <div>
statt einer <ul>
verwendest. Einzelne Elternelemente um jedes Element werden nicht benötigt.
<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>
Einträge in Listengruppen können anstelle von Listeneinträgen auch Buttons sein (wenn sie in einem <div>
statt einer <ul>
sind). Den Einträgen müssen dann keine einzelnen Elemente mehr übergeordnet werden. Hier nicht die normalen .btn
-Klassen verwenden.
<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üge .disabled
zu einem .list-group-item
hinzu, um durch Grautöne einen Eintrag deaktiviert aussehen zu lassen.
<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>
Verwende Kontextklassen, um Listen-Einträge zu gestalten (unabhängig davon, ob du Standard- oder verlinkte Listen-Einträge verwendest). Außerdem gibt es .active
für eine Darstellung als aktives Element.
<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>
Du kannst quasi jegliches HTML einbinden, auch in verlinkten Listengruppen wie der hier unten.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at 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">Listengruppen-Eintragsüberschrift</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Während das nicht immer notwendig ist, willst du dein DOM manchmal vielleicht in eine Box einfügen. Probier für solche Situationen doch mal die Panel-Komponente aus.
Standardmäßig sorgt die Klasse .panel
nur für einen einfachen Rahmen und etwas Innenabstand zwischen diesem und dem Inhalt.
<div class="panel panel-default">
<div class="panel-body">
Einfaches Panel-Beispiel
</div>
</div>
Du kannst mit .panel-heading
ganz einfach einen Container für eine Überschrift zu deinem Panel hinzufügen. Außerdem kannst du irgendeine <h1>
-<h6>
mit .panel-title
versehen, um besondere Stile zu der Überschrift hinzuzufügen. Die Schriftgröße von <h1>
-<h6>
werden allerdings von .panel-heading
überschrieben.
Für passende Link-Farben solltest du Links in Überschriften immer dem .panel-title
unterordnen.
<div class="panel panel-default">
<div class="panel-heading">Panel-Überschrift ohne Titel</div>
<div class="panel-body">
Panel-Inhalt
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel-Titel</h3>
</div>
<div class="panel-body">
Panel-Inhalt
</div>
</div>
Sortiere Buttons oder weniger wichtigen Text in einem .panel-footer
. Beachte, dass Panel-Footer nicht die Farben und Rahmen von Kontext-Varianten übernehmen, da die Footer nicht für den Vordergrund bestimmt sind.
<div class="panel panel-default">
<div class="panel-body">
Panel-Inhalt
</div>
<div class="panel-footer">Panel-Footer</div>
</div>
Wie bei anderen Komponenten kannst du auch einem Panel mit Kontextklassen mehr Bedeutung in Bezug auf einen bestimmten Zusammenhang verleihen.
<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üge irgendeine .table
ohne Rahmen direkt in ein Panel ein und sie wird nahtlos eingebunden. Falls es einen .panel-body
gibt, fügen wir eine zusätzliche Rahmengrenze oben an der Tabelle hinzu, damit die verschiedenen Teile gut voneinander zu unterscheiden sind.
Ein bisschen ganz normaler Panel-Inhalt. Nulla vitae elit libero, a 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 | Benutzername |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<div class="panel panel-default">
<!-- Standard-Panel-Inhalt -->
<div class="panel-heading">Panel-Überschrift</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Tabelle -->
<table class="table">
...
</table>
</div>
Falls es keinen Panel-Body gibt, gibt es auch keine Unterbrechung in Form einer Lücke zwischen Panel-Überschrift und Tabelle.
# | Vorname | Nachname | Benutzername |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<div class="panel panel-default">
<!-- Standard-Panel-Inhalt -->
<div class="panel-heading">Panel-Überschrift</div>
<!-- Tabelle -->
<table class="table">
...
</table>
</div>
Auch Listengruppen kannst du ganz einfach in einem Panel einbinden.
Ein bisschen ganz normaler Panel-Inhalt. Nulla vitae elit libero, a 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">
<!-- Standard-Panel-Inhalt -->
<div class="panel-heading">Panel-Überschrift</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Listengruppe -->
<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ögliche es Browsern, die Abmessungen von Videos oder Präsentationen abhängig von der Breite des übergeordneten Blocks zu ermitteln, indem du ein grundlegendes Verhältnis festlegst, das sich jedem Gerät anpasst.
Die Regeln werden direkt auf die Elemente <iframe>
, <embed>
, <video>
und <object>
angewandt. Du kannst optional die Klasse .embed-responsive-item
verwenden, wenn du die Stile bei anderen Attributen gleichsetzen willst.
Pro-Tip! Du musst für deine <iframe>
s nicht mehr frameborder="0"
festlegen, da wir dies bereits für dich überschreiben.
<!-- 16:9-Seitenverhältnis -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3-Seitenverhältnis -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Das Well kannst du als simplen Effekt für ein Element verwenden, um diesen einen eingravierten Effekt zu geben.
<div class="well">...</div>
Innenabstand und abgerundete Ecken kannst du mit zwei optionalen Veränderungsklassen anpassen.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>