Verfügbare Icons

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.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-music
glyphicon glyphicon-search
glyphicon glyphicon-heart
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-gift
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-comment
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certificate
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
glyphicon glyphicon-hand-left
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-briefcase
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-heart-empty
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-unchecked
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-saved
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-apple
glyphicon glyphicon-erase
glyphicon glyphicon-hourglass
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-scissors
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-tasted
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-oil
glyphicon glyphicon-grain
glyphicon glyphicon-sunglasses
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Verwendung

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.

Nicht mit anderen Komponenten vermischen.

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.

Nur mit leeren Elementen verwenden

Icon-Klassen sollten nur auf Elemente angewendet werden, die weder Text noch untergeordnete Elemente enthalten.

Ort der Icon-Schriftarten-Dateien ändern

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:

Verändere die Variablen @icon-font-path und/oder @icon-font-name in den Less-Quelldateien.
Verwende die Option der relativen URLs, die der Less-Kompilierer bereitstellt.
Verändere die url()-Pfade im kompilierten CSS.

Verwende die Option, die am besten zu deiner spezifischen Umwicklungseinrichtung passt.

Barrierefreie Icons

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>

Beispiele

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.

Gib eine gültige Email-Adresse ein

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

Beispiel

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>

Ausrichtung

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.

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

Überschriften

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>

Trennstrich

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>

Deaktivierte Einträge

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.

Tooltips & Popovers in Button-Gruppen benötigen besondere Einstellung

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

Nutze die richtige `role` und stelle ein Label zur Verfügung

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

Einfaches Beispiel

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>

Größe

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>

Verschachtelung

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>

Vertikale Alternative

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>

Gleichmäßig verteilte Button-Gruppen

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.

Umgang mit Rahmen

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.

IE8 und Rahmengrenzen

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.

Mit `<a>`-Elementen

Verpacke eine Reihe von .btns einfach in .btn-group.btn-group-justified.

Links Mitte Rechts

Links Mitte

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

Links, die als Buttons fungieren

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.

Mit `<button>`-Elementen

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

Plugin-Abhängigkeit

Button-Dropdowns benötigen das Dropdown-Plugin in deiner Bootstrap-Version.

Einzelne Button-Dropdowns

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>

Getrennte Button-Dropdowns

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>

Größe

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>

Dropup-Variante

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

Nur text-basierte `<input>`s

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

Tooltips & Popovers in Input-Gruppen benötigen besondere Einstellung

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

Nicht mit anderen Komponenten vermischen

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.

Füge immer Labels hinzu

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.

Einfaches Beispiel

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>

Größe

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>

Auswahlfelder-Add-ons

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

Button-Add-ons

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

Buttons mit Dropdowns

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">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 -->

Unterteilte Buttons

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

Mehrere Buttons

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.

Navs als Teil von Tab-Panels benötigen JavaScript-Tabs-Plugin

Für Tabs mit Flächen, zwischen denen man wechseln kann, musst du das Tabs JavaScript-Plugin verwenden. Im Markup sind dann außerdem zusätzliche role- und ARIA-Attribute erforderlich. Siehe das Beispiel-Markup des Plugins für mehr Infos.

Navs als Navigationselemente barrierefrei gestalten

Falls du Navs verwendest, um eine Navigationsleiste zu erstellen, füge unbedingt role="navigation" zum logischsten übergeordneten Container der <ul> hinzu oder umschließe die ganze Navigation mit einem <nav>-Element. Füge die Rolle nicht zur <ul> selbst hinzu, da dies assistive Technologien davon abhalten würde, sie als tatsächliche Liste vorzulesen.

Tabs

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>

Pills

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>

Gleichmäßig verteilte Variante

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.

Safari und responsive Gleichsatz-Navs

Safari (Stand v9.1.2) hat einen Fehler, bei dem das Verändern der Breite deines Browser-Fensters Anzeigefehler in der gleichmäßig verteilten Variante der Navs hervorruft. Diese Fehler verschwinden nach einem erneuten Laden der Seite. Dieser Fehler ist auch im Beispiel der gleichmäßig verteilten Variante sichtbar.

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

Deaktivierte Links

Füge .disabled zu einem Eintrag in irgendeiner Nav-Komponente (Tabs oder Pills) hinzu für graue Links und deaktivierte Hover-Effekte.

Link-Funktionalität nicht beeinträchtigt

Diese Klasse ändert nur das Erscheinungsbild des <a>, nicht seine Funktionalität. Verwende eigenes JavaScript, um Links wirklich zu deaktivieren.

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

Mit Dropdowns

Mit ein bisschen mehr HTML und dem Dropdowns-JavaScript-Plugin kannst du Dropdown-Menüs zu Navs hinzufügen.

Tabs mit Dropdowns

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

Pills mit Dropdowns

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown-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.

Umfang und Breite der Inhalte

Da Bootstrap nicht weiß, wie viel Platz die Inhalte in deiner Navbar brauchen, kannst du eventuell auf Probleme stoßen, weil der Inhalt in einer zweiten Zeile weitergeführt wird. Um dies zu beheben kannst du:

Die Anzahl oder Breite von Navbar-Einträgen reduzieren.
Einige Navbar-Einträge auf bestimmten Bildschirmgrößen über responsive Hilfsklassen ausblenden.
Den Punkt, an dem deine Navbar zwischen minimierter und horizontaler Ansicht wechselt, anpassen. Verändere die @grid-float-breakpoint Variable oder füge deine eigenen Media Queries hinzu.

Punkt anpassen, an dem sich das Navbar-Layout verändert

Die Navbar faltet sich zu ihrer vertikalen mobilen Ansicht zusammen, wenn das Anzeigefenster schmaler als @grid-float-breakpoint ist und wird horizontal wenn die Breite des Anzeigefensters mindestens @grid-float-breakpoint ist. Verändere diese Variable im Less-Quellcode, um zu kontrollieren, wann die Navbar zwischen der kleinen mobilen und der breiteren Ansicht wechselt. Der Standard-Wert ist 768px (der kleinste "small"-, oder "tablet"-Bildschirm).

<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 immer Labels hinzu

Screenreader haben Schwierigkeiten mit Formularen, wenn du kein Label für jedes Eingabefeld hinzufügst. Du kannst diese Labels zu Inline-Formularen hinzufügen und dann mit .sr-only ausblenden. Es gibt noch andere Methoden, um ein Label für assistive Technologien bereitzustellen, wie z.B. die Attribute aria-label, aria-labelledby oder title. Falls keines davon vorhanden ist, greifen Screenreader u.U. auf das Attribut placeholder zurück, wenn es da ist. Beachte, dass die Verwendung von placeholder als Ersatz für andere Labelling-Methoden nicht empfohlen wird.

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>

Body-Padding notwendig

Die oben fixierte Navbar wird Teile deines Inhalts überlagern, solange du nicht oben padding zum <body> hinzufügst. Teste deine eigenen Werte oder nutze unseren Schnipsel unten. Tipp: Standardmäßig ist die Navbar 50 Pixel hoch.

body { padding-top: 70px; }

Denk daran, dass du diesen Code unbedingt nach dem normalen Bootstrap-CSS einfügen musst.

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>

Body-Padding notwendig

Die unten fixierte Navbar wird Teile deines Inhalts überlagern, solange du nicht unten padding zum <body> hinzufügst. Teste deine eigenen Werte oder nutze unseren Schnipsel unten. Tipp: Standardmäßig ist die Navbar 50 Pixel hoch.

body { padding-bottom: 70px; }

Denk daran, dass du diesen Code unbedingt nach dem normalen Bootstrap-CSS einfügen musst.

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>

Breadcrumbs

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>

Seiten-Nummerierung

Biete auf deiner Site oder Anwendung Links zu verschiedenen nummerierten Seiten mit der Pagination-Komponente oder der einfacheren Pager-Alternative an.

Standard

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">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Weiter">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Komponente muss mit Label versehen werden

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

Deaktivierte oder aktive Ansichten

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">&laquo;</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">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(aktuell)</span></span>
    </li>
    ...
  </ul>
</nav>

Größe

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>

Pager

Einfache Links zur vorherigen und nächsten Seite mit wenig Markup und Stilen. Perfekt für simple Seiten wie Blogs oder Magazine.

Standard-Beispiel

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>

Ausgerichtete Links

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">&larr;</span> Älter</a></li>
    <li class="next"><a href="#">Neuer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Deaktivierte Ansicht

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">&larr;</span> Älter</a></li>
    <li class="next"><a href="#">Neuer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Beispiel

Überschrift Neu

<h3>Überschrift <span class="label label-default">Neu</span></h3>

Verfügbare Varianten

Füge irgendeine der unten genannten zusätzlichen Klassen hinzu, um das Aussehen eines Labels anzupassen.

Standard Primär Erfolg Info Warnung Gefahr

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

Hast du eine große Anzahl von Labels?

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.

Posteingang 42

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

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

Verschwinden von allein

Wenn es keine neuen oder ungelesenen Objekte gibt, verschwinden Badges einfach (über den :empty-Selektor in CSS), solange wirklich kein Inhalt darin vorhanden ist.

Browser-Kompatibilität

Badges werden im Internet Explorer 8 nicht automatisch verschwinden, da dieser :empty nicht unterstützt.

Passt sich der aktiven Ansicht in Navs an

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.

Hallo Welt!

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.

Mehr erfahren

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

Standard-Beispiel

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>

Eigene Inhalte

Mit nur ein bisschen mehr Markup kannst du alle möglichen HTML-Inhalte wie Überschriften, Absätze oder Buttons in Vorschaubilder integrieren.

Vorschaubild-Titel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Vorschaubild-Titel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Vorschaubild-Titel

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

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

Beispiele

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.

Keine Standard-Klasse

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.

Sehr gut! Du hast erfolgreich diesen wichtigen Warnhinweis gelesen.

Hinweis! Hier ist deine Aufmerksamkeit gefragt, aber es ist nicht ganz so wichtig.

Warnung! Du siehst ganz blass aus, ist alles in Ordnung?

Oh nein! Kontrolliere deine Eingaben und versuch es dann noch einmal.

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

Ausblendbare Variante

Baue einen Warnhinweis aus, indem du optional .alert-dismissible und einen Schließen-Button hinzufügst.

Erfordert das JavaScript-Plugin für Warnhinweise

Damit Warnhinweise tatsächlich geschlossen werden können, musst du das JavaScript-Plugin für Warnhinweise verwenden.

Warnung! Du siehst ganz blass aus, ist alles in Ordnung?

<div class="alert alert-warning alert-dismissible">
  <button type="button" class="close" data-dismiss="alert" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>
  <strong>Warnung!</strong> Du siehst ganz blass aus, ist alles in Ordnung?
</div>

Richtiges Verhalten auf allen Geräten

Du solltest immer das <button>-Element mit dem data-dismiss="alert"-data-Attribut verwenden.

Links in Warnungen

Verwende die Hilfsklasse .alert-link, um ganz leicht passende Farben zu Links in irgendeinem Warnhinweis hinzuzufügen.

Sehr gut! Du hast erfolgreich diesen wichtigen Warnhinweis gelesen.

Hinweis! Hier ist deine Aufmerksamkeit gefragt, aber es ist nicht ganz so wichtig.

Warnung! Du siehst ganz blass aus, ist alles in Ordnung?

Oh nein! Kontrolliere deine Eingaben und versuch es dann noch einmal.

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

Browser-Kompatibilität

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.

Kompatibilität mit Content Security Policies (CSPs)

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.

Einfaches Beispiel

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>

Mit Label

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.

60%

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

Um sicherzustellen, dass der Labeltext auch bei niedrigen Prozentwerten lesbar bleibt, überlege dir, eine min-width zur Verlaufsleiste hinzuzufügen.

0%

2%

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

Kontext-Varianten

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>

Gestreifte Variante

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>

Animierte Variante

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>

Reihung

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.

Standard-Medien-Objekte

Die normalen Medien-Objekte zeigen ein Medienobjekt (Bilder, Video, Ton) links oder rechts vom Inhalt an.

Medien-Überschrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Medien-Überschrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Verschachtelte Medien-Überschrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Medien-Überschrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Medien-Überschrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

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

Medien-Ausrichtung

Die Bilder oder anderen Medien können oben, mittig oder unten ausgerichtet werden. Der Standard ist eine Ausrichtung oben.

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.

Mittig ausgerichtet (media-middle)

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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

Unten ausgerichtet (media-bottom)

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>

Medien-Liste

Mit etwas mehr Markup kannst du Medien-Objekte in einer Liste verwenden (hilfreich für Kommentar-Threads oder Artikellisten).

Medien-Überschrift

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Verschachtelte Medien-Überschrift
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Verschachtelte Medien-Überschrift
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Verschachtelte Medien-Überschrift
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

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

Einfaches Beispiel

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.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

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

Badges

Wenn du Badges zu Einträgen in einer Listengruppe hinzufügst, werden diese automatisch ganz rechts positioniert.

14 Cras justo odio
2 Dapibus ac facilisis in
1 Morbi leo risus

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

Verlinkte Einträge

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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

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

Button-Einträge

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>

Deaktivierte Einträge

Füge .disabled zu einem .list-group-item hinzu, um durch Grautöne einen Eintrag deaktiviert aussehen zu lassen.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

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

Kontext-Varianten

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.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

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

Eigene Inhalte

Du kannst quasi jegliches HTML einbinden, auch in verlinkten Listengruppen wie der hier unten.

Listengruppen-Eintragsüberschrift

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

Listengruppen-Eintragsüberschrift

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

Listengruppen-Eintragsüberschrift

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.

Einfaches Beispiel

Standardmäßig sorgt die Klasse .panel nur für einen einfachen Rahmen und etwas Innenabstand zwischen diesem und dem Inhalt.

Einfaches Panel-Beispiel

<div class="panel panel-default">
  <div class="panel-body">
    Einfaches Panel-Beispiel
  </div>
</div>

Panel mit Überschrift

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.

Panel-Überschrift ohne Titel

Panel-Inhalt

Panel-Titel

Panel-Inhalt

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

Panel mit Footer

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.

Panel-Inhalt

Panel-Footer

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

Kontext-Varianten

Wie bei anderen Komponenten kannst du auch einem Panel mit Kontextklassen mehr Bedeutung in Bezug auf einen bestimmten Zusammenhang verleihen.

Panel-Titel

Panel-Inhalt

Panel-Titel

Panel-Inhalt

Panel-Titel

Panel-Inhalt

Panel-Titel

Panel-Inhalt

Panel-Titel

Panel-Inhalt

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

Mit Tabellen

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

Panel-Überschrift

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

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

Panel-Überschrift

#	Vorname	Nachname	Benutzername
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<div class="panel panel-default">
  <!-- Standard-Panel-Inhalt -->
  <div class="panel-heading">Panel-Überschrift</div>

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

Mit Listengruppen

Auch Listengruppen kannst du ganz einfach in einem Panel einbinden.

Panel-Überschrift

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.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

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

Standard-Well

Das Well kannst du als simplen Effekt für ein Element verwenden, um diesen einen eingravierten Effekt zu geben.

Sieh mal, ich bin in einem Well!

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

Optionale Klassen

Innenabstand und abgerundete Ecken kannst du mit zwei optionalen Veränderungsklassen anpassen.

Sieh mal, ich bin in einem großen Well!

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

Sieh mal, ich bin in einem kleinen Well!

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

Komponenten

Glyphicons

Verfügbare Icons

Verwendung

Nicht mit anderen Komponenten vermischen.

Nur mit leeren Elementen verwenden

Ort der Icon-Schriftarten-Dateien ändern

Barrierefreie Icons

Beispiele

Dropdown-Menüs

Beispiel

Ausrichtung

Zusätzliche Positionierung eventuell erforderlich

Ausrichtung über .pull-right veraltet

Überschriften

Trennstrich

Deaktivierte Einträge

Button-Gruppen

Tooltips & Popovers in Button-Gruppen benötigen besondere Einstellung

Nutze die richtige role und stelle ein Label zur Verfügung

Einfaches Beispiel

Button-Toolbar

Größe

Verschachtelung

Vertikale Alternative

Gleichmäßig verteilte Button-Gruppen

Umgang mit Rahmen

IE8 und Rahmengrenzen

Mit <a>-Elementen

Links, die als Buttons fungieren

Mit <button>-Elementen

Button-Dropdowns

Plugin-Abhängigkeit

Einzelne Button-Dropdowns

Getrennte Button-Dropdowns

Größe

Dropup-Variante

Input-Gruppen

Nur text-basierte <input>s

Tooltips & Popovers in Input-Gruppen benötigen besondere Einstellung

Nicht mit anderen Komponenten vermischen

Füge immer Labels hinzu

Einfaches Beispiel

Größe

Auswahlfelder-Add-ons

Button-Add-ons

Buttons mit Dropdowns

Unterteilte Buttons

Mehrere Buttons

Navs

Navs als Teil von Tab-Panels benötigen JavaScript-Tabs-Plugin

Navs als Navigationselemente barrierefrei gestalten

Tabs

Pills

Gleichmäßig verteilte Variante

Safari und responsive Gleichsatz-Navs

Deaktivierte Links

Link-Funktionalität nicht beeinträchtigt

Mit Dropdowns

Tabs mit Dropdowns

Pills mit Dropdowns

Navbar

Standard-Navbar

Umfang und Breite der Inhalte

Benötigt JavaScript-Plugin

Punkt anpassen, an dem sich das Navbar-Layout verändert

Navbars barrierefrei gestalten

Logo

Formulare

Tücken auf mobilen Geräten

Füge immer Labels hinzu

Buttons

Kontext-spezifische Verwendung

Text

Zusätzliche Links

Ausrichtung

Mehrere Komponenten rechts ausrichten

Oben fixierte Variante

Body-Padding notwendig

Unten fixierte Variante

Ausrichtung über `.pull-right` veraltet

Nutze die richtige `role` und stelle ein Label zur Verfügung

Mit `<a>`-Elementen

Mit `<button>`-Elementen

Nur text-basierte `<input>`s