CSS
Globale CSS-Stile, grundlegende HTML-Elemente mit erweiterbaren Klassen gestaltet und ein umfangreiches Raster-System.
Überblick
Hol dir die harten Fakten über die wichtigsten Teile von Bootstraps Infrastruktur, inklusive unserem Ansatz für bessere, schnellere, stabilere Web-Entwicklung.
HTML5-Doctype
Bootstrap benutzt bestimmte HTML-Elemente und CSS-Eigenschaften, die die Verwendung des HTML5-Doctypes erforderlich machen. Füge diesen am Anfang von all deinen Projekten ein.
<!doctype html>
<html lang="de">
...
</html>Mobile-First-Ansatz
Mit Bootstrap 2 haben wir optionale Stile für die wichtigsten Aspekte des Frameworks hinzugefügt, die Projekte für mobile Geräte bereit machten. Mit Bootstrap 3 haben wir das gesamte Projekt umgeschrieben, damit es sich von Anfang an gut mit mobilen Geräten versteht. Anstatt optionale mobile Stile zusätzlich hinzuzufügen, sind diese einfach direkt eingebaut. Genauer gesagt: Bootstrap ist ein Mobile-First-Projekt. Stile, die zunächst für kleine Bildschirme geschrieben wurden und sich dann den größeren anpassen, findest du in der gesamten Bibliothek immer wieder, anstatt in separaten Dateien.
Damit deine Seite auf mobilen Geräten vernünftig angezeigt wird und gezoomt werden kann, ergänze das Viewport-Meta-Tag in deinem <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Du kannst Zooming auf mobilen Geräten deaktivieren, indem du user-scalable=no zu diesem Viewport-Meta-Tag hinzufügst. Dies deaktiviert Zooming, was bedeutet, dass Benutzer nur scrollen können und die Seite sich etwas mehr anfühlt wie eine native Anwendung. Alles in allem empfehlen wir dies nicht auf jeder Seite, also sei vorsichtig!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Typografie und Links
Bootstrap legt globale Grundregeln für die Anzeige von Elementen, Typografie und Links fest. Ganz genau:
- Wir setzen
background-color: #fff;beimbodyund machen so den Seitenhintergrund weiß. - Wir verwenden die Variablen
@font-family-base,@font-size-baseund@line-height-baseals Basis für die Typografie. - Wir färben die Links global über
@link-colorund dekorieren sie nur bei:hovermit einer Unterstreichung.
Diese Stile findest du in der Datei scaffolding.less.
Normalize.css
Damit deine Seite in allen Browsern möglichst gleich aussieht, verwenden wir Normalize.css, ein Projekt von Nicolas Gallagher und Jonathan Neal.
Container
Bootstrap benötigt ein Element, in dem Seiteninhalte und unser Raster-System verpackt sind. Du kannst dir einen von zwei Containern zur Verwendung in deinem Projekt aussuchen. Beachte, dass aufgrund von padding und mehr keiner der beiden Container verschachtelbar ist.
Verwende .container für einen sich anpassenden Container mit einer festen Breite.
<div class="container">
...
</div>Verwende .container-fluid für einen Container, der die gesamte Breite deines Anzeigefensters einnimmt.
<div class="container-fluid">
...
</div>Raster-System
Bootstrap beinhaltet ein anpassungsfähiges, Mobile-First-basiertes, fließendes Rastersystem, das bis zu 12 Spalten über verschiedene Geräte- oder Viewport-Größen skaliert. Dabei sind vordefinierte Klassen für einfache Layout-Optionen, sowie umfangreiche Mixins für die Erstellung von semantischeren Layouts.
Einleitung
Rastersysteme werden dafür verwendet, Seitenlayouts mit einer Reihe von Zeilen und Spalten zu erstellen, die deine Inhalte beherbergen. Hier steht, wie das Bootstrap-Rastersystem funktioniert:
- Zeilen (
.rows) müssen für korrekte Ausrichtung und Abstände in einem.container(fixierte Breite) oder.container-fluid(ganze Breite) platziert werden. - Verwende Zeilen, um horizontale Gruppen von Spalten zu erstellen.
- Inhalt sollte in Spalten platziert werden und nur Spalten dürfen direkte Kinder von Zeilen sein.
- Vordefinierte Raster-Klassen wie
.rowund.col-xs-4sind verfügbar für die schnelle Erstellung von Layouts. Außerdem kannst du Less-Mixins verwenden, um deinem Layout mehr Semantik zu verleihen. - Spalten erzeugen "Furchen" (Lücken zwischen Spalten-Inhalt) über
padding. Dieser Innenabstand wird in Zeilen von der ersten und letzten Spalte über negativen Außenabstand wieder abgezogen. - Der negative Außenabstand ist der Grund dafür, dass die Beispiele unten breiter sind als der Fließtext. Durch den negativen Außenabstand ist der Inhalt von Raster-Spalten auf einer Linie mit Inhalt außerhalb von jeglichen Raster-Elementen.
- Raster-Spalten werden definiert, indem du die Anzahl von zwölf verfügbaren Spalten angibst, über die die Raster-Spalte gelegt werden soll. Zum Beispiel kannst du drei gleich große Spalten mit drei
.col-xs-4erstellen. - Falls mehr als 12 Spalten in einer einzigen Zeile platziert werden, wird jede Gruppe mit Extra-Spalten als eine Einheit in eine neue Zeile rutschen.
- Rasterklassen beziehen sich auf Geräte mit Bildschirmbreiten, die genau so groß oder größer als die Umbruchpunkt-Größen sind. Sie überschreiben Rasterklassen, die sich auf kleinere Geräte beziehen. Wenn du z.B. eine
.col-md-*-Klasse auf ein Element anwendest, wird sich dies daher nicht nur auf die Stile auf mittleren Geräten auswirken, sondern auch auf diejenigen auf großen Geräten, es sei denn es gibt außerdem eine.col-lg-*-Klasse.
Sieh dir die Beispiele an, um diese Prinzipien in deinen Code einzubauen.
Media-Queries
Wir verwenden die folgenden Media-Queries in unseren Less-Dateien, um die grundlegenden Umbruchpunkte in unserem Rastersystem zu erstellen.
/* Extra-kleine Geräte (Smartphones, weniger als 768px) */
/* Kein Media-Query, weil dies der Standard in Bootstrap ist */
/* Kleine Geräte (Tablets, 768px und breiter) */
@media (min-width: @screen-sm-min) { ... }
/* Mittlere Geräte (Desktop-PCs, 992px und breiter) */
@media (min-width: @screen-md-min) { ... }
/* Große Geräte (Desktop-PCs, 1200px und breiter) */
@media (min-width: @screen-lg-min) { ... }Manchmal, wenn bestimmte Stile nur auf einigen Geräten Sinn machen, erweitern wir diese Media-Queries mit einer max-width.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Raster-Optionen
Schau dir in einer praktischen Tabelle an, wie die Aspekte von Bootstraps Rastersystem auf den verschiedenen Geräten funktionieren.
| Extra-kleine Geräte Smartphones (<768px) | Kleine Geräte Tablets (≥768px) | Mittlere Geräte Desktop-PCs (≥992px) | Große Geräte Desktop-PCs (≥1200px) | |
|---|---|---|---|---|
| Raster-Verhalten | Durchgehend horizontal | Zuerst minimiert, über Umbruchpunkten horizontal | ||
| Container-Breite | Keine (auto) | 750px | 970px | 1170px |
| Klassen-Präfix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Spaltenanzahl | 12 | |||
| Spaltenbreite | Auto | ~62px | ~81px | ~97px |
| Abstandsbreite | 30px (15px auf jeder Seite einer Spalte) | |||
| Verschachtelbar | Ja | |||
| Abrückung | Ja | |||
| Spalten-Umordnung | Ja | |||
Beispiel: Übereinander, nebeneinander
Du brauchst nur ein paar .col-md-*-Klassen, um ein grundlegendes Raster zu erstellen, dessen Spalten auf Smartphones und Tablets (extra-klein bis klein) übereinander und dann ab mittleren Bildschirmgrößen auf Desktop-PCs nebeneinander angeordnet sind. Platziere die Rasterspalten einfach in irgendeiner .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Beispiel: Fließender Container
Ein auf festen Breiten basiertes Raster-Layout kannst du jederzeit in ein Layout über die ganze Breite der Seite verwandeln, indem du den äußeren .container in einen .container-fluid änderst.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Beispiel: Mobil und Desktop-PC
Du willst deine Spalten auf kleineren Geräten nicht einfach nur übereinander haben? Verwende die extra-kleinen und mittleren Geräte-Raster-Klassen, indem du .col-xs-* .col-md-* zu deinen Spalten hinzufügst. Schau dir das Beispiel unten an, um besser zu verstehen, wie das funktioniert.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stapel die Spalten auf mobilen Geräten, indem du eine über die ganze und eine über die halbe Breite spannst -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Spalten sind zunächst 50% breit und vergrößern sich auf Desktop-PCs auf 33.3% -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Spalten sind auf allen Bildschirmgrößen immer 50% breit -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Beispiel: Mobil, Tablet und Desktop-PC
Bau das vorherige Beispiel weiter aus, indem du noch dynamischere und vielfältigere Layouts mit den Tablet-Klassen .col-sm-* erstellst.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: Setze die Floats der XS-Spalten zurück, falls ihr Inhalt nicht gleich hoch ist -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>Beispiel: Spaltenumbruch
Falls mehr als 12 Spalten in einer einzigen Zeile platziert werden, wird jede Gruppe mit Extra-Spalten als eine Einheit in eine neue Zeile rutschen.
.col-xs-9
.col-xs-4
Da 9 + 4 = 13 > 12, rutscht dieser 4 Spalten breite div als ganze Einheit in eine neue Zeile.
Da 9 + 4 = 13 > 12, rutscht dieser 4 Spalten breite div als ganze Einheit in eine neue Zeile.
.col-xs-6
Folgende Spalten werden in der neuen Zeile fortgeführt.
Folgende Spalten werden in der neuen Zeile fortgeführt.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Da 9 + 4 = 13 > 12, rutscht dieser 4 Spalten breite div als ganze Einheit in eine neue Zeile.</div>
<div class="col-xs-6">.col-xs-6<br>Folgende Spalten werden in der neuen Zeile fortgeführt.</div>
</div>Responsive Spalten-Resets
Mit den vier Gliedern unseres Raster-Systems ist es fast unvermeidbar, dass du auf Probleme stößt, wenn bei bestimmten Umbruchpunkten deine Spalten nicht richtig positioniert werden, da eine höher ist als die andere. Um dies zu beheben, kannst du eine Kombination aus .clearfix und unseren Responsiven Hiflsmitteln verwenden.
.col-xs-6 .col-sm-3
Veränder die Breite deines Browser-Fensters oder sieh dir das Beispiel auf deinem Smartphone an.
Veränder die Breite deines Browser-Fensters oder sieh dir das Beispiel auf deinem Smartphone an.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Der clearfix wird nur für die benötigte Breite des Ansichtsfensters hinzugefügt -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>Außerdem kann es sein, dass du Spalten-Abrückungen, -Pushes und -Pulls zurücksetzen musst. Schau es dir live und in Farbe im Raster-Beispiel an.
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>Freiräume entfernen
Mit der Klasse .row-no-gutters kannst du die Freiräume einer Reihe und ihrer Spalten entfernen.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Spalten abrücken
Du kannst mit Hilfe der .col-md-offset-*-Klassen Spalten nach rechts verschieben. Diese Klassen vergrößern den linken Außenabstand einer Spalte um * Spalten. .col-md-offset-4 verschiebt eine .col-md-4-Spalte zum Beispiel um vier Spalten nach rechts.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Du kannst Offsets von niedrigeren Grid-Bereichen mit den Klassen .col-*-offset-0 überschreiben.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>Spalten verschachteln
Um deinem Inhalt eine weitere Raster-Ebene hinzuzufügen, füge einfach eine neue .row und eine Reihe von .col-md-*-Spalten innerhalb von einer bestehenden .col-md-*-Spalte hinzu. Verschatelte Zeilen sollten bis zu 12 Spalten beinhalten (es ist nicht notwendig, dass du alle 12 verfügbaren Spalten nutzt).
Ebene 1: .col-sm-9
Ebene 2: .col-xs-8 .col-sm-6
Ebene 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Ebene 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Ebene 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Ebene 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>Spalten umordnen
Ändere die Reihenfolge von Raster-Spalten mit den Klassen .col-md-push-* und .col-md-pull-*.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>Less Mixins und Variablen
Neben den vorgefertigten Rasterklassen, die du verwenden kannst, um schnell Layouts zusammenzustellen, enthält Bootstrap auch Less-Variablen und -Mixins, mit denen du deine eigenen Layouts mit semantischer Namensgebung generieren kannst.
Variablen
Variablen bestimmen die Anzahl der Spalten, die Breite des Abstands zwischen Spalten und den Punkt, an dem die Spalten anfangen, zu floaten und so horizontal werden. Wir verwenden diese, um die vordefinierten Rasterklassen oben zu erstellen, sowie für die unten beschriebenen Mixins.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Mixins
Mixins helfen dir zusammen mit den Raster-Variablen dabei, semantisches CSS für individuelle Raster-Spalten zu erstellen.
// Generiert einen Wrapper für eine Reihe von Spalten
.make-row(@gutter: @grid-gutter-width) {
// Floats der Spalten zurücksetzen
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negativer Außenabstand für verschachtelte Zeilen, damit Spalteninhalt gut ausgerichtet ist
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generiert die extra-kleinen Spalten
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Verhindern, dass Spalten verschwinden, wenn sie leer sind
min-height: 1px;
// Innenabstand
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Breite basierend auf den zur Verfügung stehenden Spalten berechnen
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generiert die kleinen Spalten
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Verhindern, dass Spalten verschwinden, wenn sie leer sind
min-height: 1px;
// Innenabstand
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Breite basierend auf den zur Verfügung stehenden Spalten berechnen
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generiert die Abrückungen der kleinen Spalten
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generiert die mittelgroßen Spalten
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Verhindern, dass Spalten verschwinden, wenn sie leer sind
min-height: 1px;
// Innenabstand
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Breite basierend auf den zur Verfügung stehenden Spalten berechnen
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generiert die Abrückungen der mittelgroßen Spalten
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generiert die großen Spalten
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Verhindern, dass Spalten verschwinden, wenn sie leer sind
min-height: 1px;
// Innenabstand
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Breite basierend auf den zur Verfügung stehenden Spalten berechnen
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generiert die Abrückungen der großen Spalten
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}Beispiel-Verwendung
Du kannst Variablen mit deinen eigenen Werten anpassen oder die Mixins einfach mit den Standard-Werten verwenden. Hier siehst du ein Beispiel für die Erstellung einer zweispaltigen Layouts mit einer Lücke zwischen den Spalten.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>Typografie
Überschriften
Alle HTML-Überschriften, <h1> bis <h6>, sind verfügbar. Außerdem gibt es die Klassen .h1 bis .h6, wenn du die Schriftstile einer Überschrift übernehmen willst, aber den Text weiterhin in einer Zeile (inline) mit anderem Text anzeigen möchtest.
h1. Bootstrap-Überschrift |
Halbfett 36px |
h2. Bootstrap-Überschrift |
Halbfett 30px |
h3. Bootstrap-Überschrift |
Halbfett 24px |
h4. Bootstrap-Überschrift |
Halbfett 18px |
h5. Bootstrap-Überschrift |
Halbfett 14px |
h6. Bootstrap-Überschrift |
Halbfett 12px |
<h1>h1. Bootstrap-Überschrift</h1>
<h2>h2. Bootstrap-Überschrift</h2>
<h3>h3. Bootstrap-Überschrift</h3>
<h4>h4. Bootstrap-Überschrift</h4>
<h5>h5. Bootstrap-Überschrift</h5>
<h6>h6. Bootstrap-Überschrift</h6>Platziere untergeordneten Text mit einem generischen <small>-Tag oder der Klasse .small in einer Überschrift.
h1. Bootstrap-Überschrift Zusatztext |
h2. Bootstrap-Überschrift Zusatztext |
h3. Bootstrap-Überschrift Zusatztext |
h4. Bootstrap-Überschrift Zusatztext |
h5. Bootstrap-Überschrift Zusatztext |
h6. Bootstrap-Überschrift Zusatztext |
<h1>h1. Bootstrap-Überschrift <small>Zusatztext</small></h1>
<h2>h2. Bootstrap-Überschrift <small>Zusatztext</small></h2>
<h3>h3. Bootstrap-Überschrift <small>Zusatztext</small></h3>
<h4>h4. Bootstrap-Überschrift <small>Zusatztext</small></h4>
<h5>h5. Bootstrap-Überschrift <small>Zusatztext</small></h5>
<h6>h6. Bootstrap-Überschrift <small>Zusatztext</small></h6>Fließtext
Bootstraps globaler Standardwert für die Schriftgröße, font-size, ist 14px, mit einer Zeilenhöhe, line-height, von 1.428. Dies wird auf den <body> und alle Absätze angewendet. Außerdem erhalten <p>s (Absätze) einen unteren Außenabstand von ihrer halben berechneten Zeilenhöhe (standardmäßig 10px).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Einführungstext
Hebe einen Absatz hervor, indem du .lead hinzufügst.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>Gemacht mit Less
Die typografischen Größen werden mit Hilfe von zwei Less-Variablen in variables.less berechnet: @font-size-base und @line-height-base. Die erste ist die grundlegende Schriftgröße und die zweite die grundlegende Zeilenhöhe. Wir verwenden diese Variablen und ein bisschen Mathematik, um Außen- und Innenabstände, Zeilenhöhen für alle unsere Textbausteine und mehr zu generieren. Ändere diese grundlegenden Variablen und Bootstrap wird sich automatisch durchgehend anpassen.
Inline-Text-Elemente
Markierter Text
Verwende das Tag <mark>, um Text aufgrund seiner Bedeutung in einem anderen Kontext hervorzuheben.
Du kannst das Mark-Tag verwenden, um Text hervorzuheben.
Du kannst das Mark-Tag verwenden, um Text <mark>hervorzuheben</mark>.Gelöschter Text
Um gelöschte Textblöcke anzuzeigen kannst du das Tag <del> verwenden.
Diese Textzeile soll als gelöschter Text angezeigt werden.
<del>Diese Textzeile soll als gelöschter Text angezeigt werden.</del>Durchgestrichener Text
Um nicht mehr relevante Textblöcke anzuzeigen, kannst du das Tag <s> verwenden.
Diese Textzeile soll als nicht mehr korrekt behandelt werden.
<s>Diese Textzeile soll als nicht mehr korrekt behandelt werden.</s>Eingefügter Text
Um Ergänzungen zum Dokument zu markieren kannst du das Tag <ins> verwenden.
Diese Textzeile soll als Ergänzung zum Dokument behandelt werden.
<ins>Diese Textzeile soll als Ergänzung zum Dokument behandelt werden.</ins>Unterstrichener Text
Um Text zu unterstreichen kannst du das Tag <u> verwenden.
Diese Textzeile wird unterstrichen angezeigt.
<u>Diese Textzeile wird unterstrichen angezeigt</u>Verwende die Standard-HTML-Tags zur unterschiedlichen Gewichtung von Text mit leichten Stilen.
Kleiner Text
Um Text-Zeilen und -Blöcke in ihrer Bedeutung herabzusetzen, verwende das Tag <small>, das einen Text auf 85% der Größe seines übergeordneten Elements setzt. Überschriften-Elemente erhalten ihre eigene font-size für verschachtelte <small>-Elemente.
Du kannst alternativ ein Inline-Element mit .small statt <small> verwenden.
Diese Textzeile steht im Kleingedruckten.
<small>Diese Textzeile steht im Kleingedruckten.</small>Fett
Um einen Textschnipsel mit einer dickeren Schriftstärke (font-weight) hervorzuheben.
Der folgende Schnipsel wird als fetter Text angezeigt.
<strong>als fetter Text angezeigt</strong>Kursiv
Um einen Textschnipsel mit Kursivdruck hervorzuheben.
Der folgende Schnipsel wird als Kursiv angezeigt.
<em>als Kursiv angezeigt</em>Alternative Elemente
Du kannst gerne die Elemente <b> und <i> in HTML5 verwenden. <b> ist dazu gedacht, Wörter hervorzuheben ohne ihre Bedeutung zu vergrößern während <i> hauptsächlich für Gesprochenes, technische Begriffe, usw. verwendet wird.
Ausrichtungsklassen
Richte Text ganz einfach mit den folgenden Klassen neu aus.
Links ausgerichteter Text.
Zentrierter Text.
Rechts ausgerichteter Text.
Blocksatz-Text.
Text ohne Umbruch.
<p class="text-left">Links ausgerichteter Text.</p>
<p class="text-center">Zentrierter Text.</p>
<p class="text-right">Rechts ausgerichteter Text.</p>
<p class="text-justify">Blocksatz-Text.</p>
<p class="text-nowrap">Text ohne Umbruch.</p>Umwandlungsklassen
Wandle Text in Komponenten mit Klassen für Groß-/Kleinschreibung um.
Kleingeschriebener Text.
Großgeschriebener Text.
Am Wortanfang großgeschriebener Text.
<p class="text-lowercase">Kleingeschriebener Text.</p>
<p class="text-uppercase">Großgeschriebener Text.</p>
<p class="text-capitalize">Am Wortanfang großgeschriebener Text.</p>Abkürzungen
Gestaltete Umsetzung des HTML-Elements <abbr> für Abkürzungen und Akkronyme, die die vollständige Version des Wortes oder Begriffes bei hover anzeigen. Abkürzungen mit einem title-Attribut haben unten eine kleine gepunktete Linie und der Mauszeiger wird zu einem Hilfe-Fragezeichen, wenn er sich über der Abkürzung befindet. Über das Attribut werden dann zusätzliche Informationen vermittelt, auch an Nutzer von assistiven Technologien.
Einfache Abkürzung
Wenn du die ausgeschriebene Version der Abkürzung anzeigen möchtest, wenn der Mauszeiger darüber ist, musst du das title-Attribut zum <abbr>-Element hinzufügen.
Eine Abkürzung des Wortes Attribut ist Attr..
<abbr title="Attribut">Attr.</abbr>Initialen
Füge .initialism zu einer Abkürzung hinzu, um die Schriftgröße etwas zu verkleinern.
HTML ist das Beste, was es seit geschnittenem Brot gegeben hat.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Adressen
Zeige Kontakt-Informationen für die nächste übergeordnete Person oder ein gesamtes Angebot an. Denk daran, die Zeilen mit <br> am Ende vernünftig zu formatieren.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
Tel.: (012) 345678-9 Vollständiger Name
vorname.nachname@example.com
1355 Market Street, Suite 900
San Francisco, CA 94103
Tel.: (012) 345678-9 Vollständiger Name
vorname.nachname@example.com
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Telefonnummer">Tel.:</abbr> (012) 345678-9
</address>
<address>
<strong>Vollständiger Name</strong><br>
<a href="mailto:#">vorname.nachname@example.com</a>
</address>Blockzitate
Um Inhaltsblöcke aus einer anderen Quelle in deinem Dokument zu zitieren.
Standard-Blockzitat
Umschließe irgendwelches HTML als Zitat mit <blockquote>. Für direkte Zitate empfehlen wir das <p>-Element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Blockzitat-Optionen
Gestaltung und Inhalt verändert sich, wenn du einige einfache Varianten des Standard-<blockquote> anwenden willst.
Eine Quelle benennen
Füge einen <footer> hinzu, um die Quelle zu identifizieren. Der eigentliche Name der Quelle sollte in <cite> stehen.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Jemand berühmtes in <cite title="Quellentitel">Quellentitel</cite></footer>
</blockquote>Alternative Ansichten
Füge .blockquote-reverse hinzu, um das Blockzitat nach rechts auszurichten.
<blockquote class="blockquote-reverse">
...
</blockquote>Listen
Unsortiert
Eine Liste von Objekten, bei denen die Reihenfolge explizit nicht von Bedeutung ist.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Sortiert
Eine Liste von Objekten, bei denen die Reihenfolge explizit von Bedeutung ist.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Ohne Gestaltung
Entferne die Standard-Gestaltung (list-style) und den linken Abstand von Listen-Einträgen. Dies bezieht sich nur auf direkte Unterobjekte der Liste, daher musst du die Klasse auch zu jeder eventuell verschachtelten Liste erneut hinzufügen.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>Inline
Platziere alle Listen-Objekte in einer Zeile mit display: inline-block; und ein wenig Innenabstand.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Beschreibung
Eine Liste von Begriffen zusammen mit ihren Beschreibungen.
- Beschreibungs-Listen
- Eine Liste mit Beschreibungen ist perfekt, um Begriffe zu erläutern.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Horizontale Beschreibung
Du kannst die Begriffe und Beschreibungen in einer <dl> auch nebeneinander anordnen. Sie sind dann auf kleinen Bildschirmen genau so gestapelt wie normale <dl>s aber sobald die Navbar horizontal wird, werden es auch diese Beschreibungen.
- Beschreibungs-Listen
- Eine Liste mit Beschreibungen ist perfekt, um Begriffe zu erläutern.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Automatische Kürzung
In horizontalen Beschreibungs-Listen werden Begriffe mit text-overflow automatisch gekürzt, wenn sie zu lang sind, um in die linke Spalte zu passen. Auf schmaleren Ansichtsfenstern nehmen sie das normale gestapelte Layout an.
Code
Inline
Um Code in Fließtext einzubinden, markiere diesen mit <code>.
Zum Beispiel sollte
<section> mit in der Textzeile stehen.
Zum Beispiel sollte <code><section></code> mit in der Textzeile stehen.Benutzereingaben
Für Eingaben, die normalerweise mit der Tastatur gemacht werden, kannst du <kbd> verwenden.
Um das Verzeichnis zu wechseln, gib cd und dann den Namen eines Verzeichnisses ein.
Um Einstellungen zu ändern, drücke ctrl + ,
Um Einstellungen zu ändern, drücke ctrl + ,
Um das Verzeichnis zu wechseln, gib <kbd>cd</kbd> und dann den Namen eines Verzeichnisses ein.<br>
Um Einstellungen zu ändern, drücke <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>Code-Block
Nutze <pre> für mehrere Zeilen Code. Denk daran, spitze Klammern in deinem Code zu escapen, damit alles richtig angezeigt wird.
<p>Ein bisschen Beispieltext...</p>
<pre><p>Ein bisschen Beispieltext...</p></pre>Du kannst außerdem optional die Klasse .pre-scrollable hinzufügen, die eine maximale Höhe (max-height) von 350px festlegen und eine Scrollleiste für die y-Achse einblenden wird.
Variablen
Verwende das Tag <var>, um Variablen zu markieren.
y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Beispiel-Ausgabe
Um Text als Beispiel-Ausgabe eines Programms zu markieren, verwende das Tag <samp>.
Dieser Text soll als Beispiel-Ausgabe eines Computer-Programms behandelt werden.
<samp>Dieser Text soll als Beispiel-Ausgabe eines Computer-Programms behandelt werden.</samp>Tabellen
Einfaches Beispiel
Für ein paar grundlegende Stile—leichte Abstände und nur horizontale Unterteilungen—füge einfach die Grundklasse .table zu einer <table> hinzu. Das mag überflüssig erscheinen, aber da viele Plugins wie Kalender und Datum-Auswählfelder Tabellen zur Formatierung verwenden, haben wir uns entschieden unsere eigenen Tabellen-Stile so zu isolieren.
| # | Vorname | Nachname | Benutzername |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
...
</table>Gestreifte Zeilen
Verwende .table-striped, um Streifen in Zebra-Art zu allen Tabellen-Zeilen im <tbody> hinzuzufügen.
Browser-Kompatibilität
Gestreifte Tabellen werden mit dem CSS-Selektor :nth-child umgesetzt, der im Internet Explorer 8 nicht verfügbar ist.
| # | Vorname | Nachname | Benutzername |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped">
...
</table>Tabelle mit Rahmen
Ergänze .table-bordered für Rahmengrenzen auf allen Seiten der Tabelle und ihren Zellen.
| # | Vorname | Nachname | Benutzername |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-bordered">
...
</table>Hover-Zeilen
Ergänze .table-hover, um Zeilen im <tbody> der Tabelle hervorzuheben, wenn sich der Mauszeiger darüber befindet (hover).
| # | Vorname | Nachname | Benutzername |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-hover">
...
</table>Komprimierte Tabelle
Ergänze .table-condensed, um die Innenabstände in Tabellen zu halbieren und sie so schmaler zu machen.
| # | Vorname | Nachname | Benutzername |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-condensed">
...
</table>Kontext-Varianten
Verwende Kontext-Klassen, um Zeilen oder einzelne Zellen einer Tabelle farbig zu markieren.
| Klasse | Beschreibung |
|---|---|
.active
| Wendet die Stile der Hover-Zeilen fest auf eine bestimmte Zeile oder Zelle an |
.success
|
Zeigt eine erfolgreiche oder positive Aktion an |
.info
|
Zeigt eine neutrale Veränderung oder Aktion an |
.warning
|
Zeigt eine Warnung an, die evtl. Aufmerksamkeit erfordert |
.danger
|
Zeigt eine gefährliche oder evtl. negative Aktion an |
| # | Spalten-Überschrift | Spalten-Überschrift | Spalten-Überschrift |
|---|---|---|---|
| 1 | Spalten-Inhalt | Spalten-Inhalt | Spalten-Inhalt |
| 2 | Spalten-Inhalt | Spalten-Inhalt | Spalten-Inhalt |
| 3 | Spalten-Inhalt | Spalten-Inhalt | Spalten-Inhalt |
| 4 | Spalten-Inhalt | Spalten-Inhalt | Spalten-Inhalt |
| 5 | Spalten-Inhalt | Spalten-Inhalt | Spalten-Inhalt |
| 6 | Spalten-Inhalt | Spalten-Inhalt | Spalten-Inhalt |
| 7 | Spalten-Inhalt | Spalten-Inhalt | Spalten-Inhalt |
| 8 | Spalten-Inhalt | Spalten-Inhalt | Spalten-Inhalt |
| 9 | Spalten-Inhalt | Spalten-Inhalt | Spalten-Inhalt |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>Bedeutungen an assistive Technologien vermitteln
Die Verwendung von Farbe, um eine Bedeutung zu einem Button hinzuzufügen, erzeugt nur einen visuellen Hinweis, der Nutzern von assistiven Technologien wie Screenreadern nicht vermittelt werden kann. Stell sicher, dass durch Farbe bezeichnete Informationen entweder durch den Inhalt selbst (den sichtbaren Text des Buttons) offensichtlich sind oder über alternative Wege eingebunden sind, wie z.B. zusätzlicher Text, der mit der Klasse .sr-only verborgen wird.
Responsive Tabellen
Erstelle anpassungsfähige Tabellen, indem du eine .table in .table-responsive verpackst. Auf allen Geräten mit weniger als 768px Breite kann man dann in der Tabelle horizontal scrollen. Auf größeren Geräten wirst du keinen Unterschied zwischen dieser und ganz normalen Tabellen feststellen.
Vertikale Kürzung
Responsive Tabellen verwenden overflow-y: hidden, das jeglichen Inhalt, der über die obere oder untere Kante der Tabelle hinausgeht, abschneidet. Insbesondere kann dies Dropdown-Menüs und andere Drittanbieter-Widgets beeinträchtigen.
Firefox und Fieldsets
Firefox hält einige seltsame Stile für Fieldsets parat, bei denen width die responsive Tabelle stört. Dies kann ohne einen Firefox-spezifischen Hack, den wir nicht in Bootstrap zur Verfügung stellen, nicht umgangen werden:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Lies für mehr Informationen diese Antwort auf Stack Overflow.
| # | Tabellen-Überschrift | Tabellen-Überschrift | Tabellen-Überschrift | Tabellen-Überschrift | Tabellen-Überschrift | Tabellen-Überschrift |
|---|---|---|---|---|---|---|
| 1 | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle |
| 2 | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle |
| 3 | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle |
| # | Tabellen-Überschrift | Tabellen-Überschrift | Tabellen-Überschrift | Tabellen-Überschrift | Tabellen-Überschrift | Tabellen-Überschrift |
|---|---|---|---|---|---|---|
| 1 | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle |
| 2 | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle |
| 3 | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle | Tabellen-Zelle |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Formulare
Einfaches Beispiel
Einzelne Formular-Felder erhalten automatisch einige globale Stile. Alle text-basierten <input>-, <textarea>- und <select>-Elemente mit der Klasse .form-control bekommen standardmäßig width: 100%; und nehmen die ganze Breite ihres übergeordneten Elements ein. Für optimale Abstände solltest Labels und Felder jeweils in .form-group verpacken.
<form>
<div class="form-group">
<label for="beispielFeldEmail1">Email-Adresse</label>
<input type="email" class="form-control" id="beispielFeldEmail1" placeholder="Email-Adresse">
</div>
<div class="form-group">
<label for="beispielFeldPasswort1">Passwort</label>
<input type="password" class="form-control" id="beispielFeldPasswort1" placeholder="Passwort">
</div>
<div class="form-group">
<label for="beispielFeldDatei">Anhang</label>
<input type="file" id="beispielFeldDatei">
<p class="help-block">Beispiel-Text-Block mit Hilfestellungen zum Ausfüllen des Formulars.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Wo ist der Haken?
</label>
</div>
<button type="submit" class="btn btn-default">Abschicken</button>
</form>Vermische niemals Formular-Gruppen mit Input-Gruppen
Du solltest Formular-Gruppen (.form-group) nicht direkt mit Input-Gruppen kombinieren. Ordne die Input-Gruppe stattdessen der Formular-Gruppe unter.
Formular in einer Zeile
Füge .form-inline zu deinem Formular hinzu (das kein <form> sein muss), um die Felder links in einer Reihe auszurichten (inline-block). Dies hat nur Auswirkungen auf Formular auf Anzeigefenstern, die mindestens 768px breit sind.
Benötigt evtl. manuelle Breiten
Eingabefelder und Auswahlfelder sind in Bootstrap standardmäßig mit width: 100% versehen. In Inline-Formularen setzen wir das auf width: auto zurück, damit mehrere Felder in der gleichen Zeile sein können. Abhängig von deinem Layout sind eventuell zusätzliche, manuelle Breiten notwendig.
Füge immer Labels hinzu
Screenreader werden Probleme mit deinen Formularen haben, wenn du nicht für jedes Feld ein Label einfügst. Du kannst solche Labels für diese Inline-Formulare verbergen, indem du die .sr-only-Klasse verwendest. Es gibt weitere alternative Methoden, um ein Label für assistiven Technologien bereitzustellen, wie z.B. die Attribute aria-label, aria-labelledby oder title. Falls keins davon vorhanden ist, verwenden Screenreader evtl. das Attribut placeholder, falls vorhanden, aber die Verwendung von placeholder als Ersatz für andere Labelling-Methoden wird nicht empfohlen.
<form class="form-inline">
<div class="form-group">
<label for="beispielFeldName2">Name</label>
<input type="text" class="form-control" id="beispielFeldName2" placeholder="Marie Mustermann">
</div>
<div class="form-group">
<label for="beispielFeldEmail2">Email</label>
<input type="email" class="form-control" id="beispielFeldEmail2" placeholder="m.mustermann@beispiel.de">
</div>
<button type="submit" class="btn btn-default">Einladung senden</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="beispielFeldEmail3">Email-Adresse</label>
<input type="email" class="form-control" id="beispielFeldEmail3" placeholder="Email-Adresse">
</div>
<div class="form-group">
<label class="sr-only" for="beispielFeldPasswort3">Passwort</label>
<input type="password" class="form-control" id="beispielFeldPasswort3" placeholder="Passwort">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Anmeldung speichern
</label>
</div>
<button type="submit" class="btn btn-default">Anmelden</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="beispielFeldSumme">Summe (in Euro)</label>
<div class="input-group">
<div class="input-group-addon">€</div>
<input type="text" class="form-control" id="beispielFeldSumme" placeholder="Summe">
<div class="input-group-addon">,00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Geld senden</button>
</form>Horizontales Formular
Verwende Bootstraps vordefinierte Raster-Klassen, um Labels und mehrere Formularfelder (.form-controls) in einem horizontalen Layout anzulegen. Dazu musst du zunächst .form-horizontal zu deinem Formular (das kein <form> sein muss) hinzufügen. .form-groups verhalten sich dadurch wie Raster-Zeilen, so dass wir .row nicht brauchen.
<form class="form-horizontal">
<div class="form-group">
<label for="eingabefeldEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="eingabefeldEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="eingabefeldPasswort3" class="col-sm-2 control-label">Passwort</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="eingabefeldPasswort3" placeholder="Passwort">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Anmeldung speichern
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Anmelden</button>
</div>
</div>
</form>Verfügbare Felder
Beispiele von Standard-Formular-Feldern, die von Bootstrap unterstüzt werden.
Inputs
Das häufigste Formularfeld, text-basierte Eingabefelder. Bietet Unterstützung für alle HTML5-Typen: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel und color.
Typ-Benennung erforderlich
Eingabefelder werden nur vollständig gestaltet, wenn ihr type vernünftig angegeben wird.
<input type="text" class="form-control" placeholder="Text-Feld">Input-Gruppen
Um Text oder Buttons vor und/oder nach irgendeinem text-basierten <input> hinzuzufügen, sieh dir doch mal Input-Gruppen an.
Text-Fläche
Formular-Feld, in das mehrere Zeilen Text eingegeben werden können. Veränder das rows-Attribut so wie es für dich am besten passt.
<textarea class="form-control" rows="3"></textarea>Optionsfelder
Felder zum Ankreuzen (checkbox) sind dazu da, eine oder mehr Optionen aus einer Liste auszuwählen, während man mit runden Optionsfeldern (radio) eine von mehrere Optionen auswählt.
Deaktivierte Checkboxes und Radios werden unterstützt, aber um einen "not-allowed"-Cursor anzuzeigen, wenn der Mauszeiger über dem <label> ist, musst du die Klasse disabled zu dem übergeordneten Element .radio, .radio-inline, .checkbox oder .checkbox-inline hinzufügen.
Standard (übereinander)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Die erste Option ist dies und das—denk daran, zu sagen, warum es toll ist!
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="">
Die zweite Option ist deaktiviert
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsfeldRadio" id="optionsfeldRadio1" value="option1" checked>
Die erste Option ist dies und das—denk daran, zu sagen, warum es toll ist!
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsfeldRadio" id="optionsfeldRadio2" value="option2">
Die zweite Option ist etwas anderes und wenn du sie auswählst, wird die erste abgewählt.
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsfeldRadio" id="optionsfeldRadio3" value="option3" checked>
Die dritte Option ist deaktiviert
</label>
</div>Optionsfelder in einer Zeile
Verwende .checkbox-inline oder .radio-inline, um eine Reihe von Checkboxen oder Radios nebeneinander anzuzeigen.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptionen" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptionen" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptionen" id="inlineRadio3" value="option3"> 3
</label>Auswahlfelder ohne Labeltext
Falls du keinen Text im <label> hast, wird das Auswahlfeld trotzdem allen Erwartungen entsprechend positioniert. Funktioniert aktuell nur mit Auswahlfeldern, die nicht zusammen in einer Zeile stehen. Denk daran, trotzdem irgendeine Art von Label für assistive Technologien zur Verfügung zu stellen (z.B. mit Hilfe von aria-label).
<div class="checkbox">
<label>
<input type="checkbox" id="blankoCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankoRadio" id="blankoRadio1" value="option1" aria-label="...">
</label>
</div>Auswahlmenüs
Beachte, dass viele eingebaute Auswahlmenüs, nämlich in Safari und Chrome, abgerundete Ecken haben, die über die border-radius-Eigenschaften nicht verändert werden können.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>In <select>-Schaltflächen mit dem Attribut multiple werden standardmäßig mehrere Optionen angezeigt.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Statisches Feld
Wenn du puren Text in einem Formular platzieren willst, kannst du die Klasse .form-control-static an einem <p> verwenden.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="eingabefeldPasswort" class="col-sm-2 control-label">Passwort</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="eingabefeldPasswort" placeholder="Passwort">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">email@example.com</p>
</div>
<div class="form-group">
<label for="eingabefeldPasswort2" class="sr-only">Passwort</label>
<input type="password" class="form-control" id="eingabefeldPasswort2" placeholder="Passwort">
</div>
<button type="submit" class="btn btn-default">Identität bestätigen</button>
</form>Fokus-Ansicht
Wir entfernen die Standard-Umrahmung (outline) von einigen Formularfeldern und wenden stattdessen einen Schatten (box-shadow) an, wenn das Feld fokussiert ist (:focus).
Demonstrative :focus-Ansicht
Das obige Beispiel wird manuell so gestaltet, dass es so aussieht wie ein fokussiertes Formular-Element. Diese manuellen Stile sind nicht in Bootstrap, sondern nur in dieser Dokumentation enthalten.
Deaktivierte Ansicht
Füge das Boolean-Attribut disabled zu einem Feld hinzu, um Benutzerinteraktionen zu verhindern. Deaktivierte Eingabefelder sind etwas heller und fügen einen not-allowed-Cursor hinzu.
<input class="form-control" id="deaktiviertesFeld" type="text" placeholder="Deaktivierter Platzhalter-Text." disabled>Deaktivierte Fieldsets
Füge das Attribut disabled zu einem <fieldset> hinzu, um alle Felder darin auf einmal zu deaktivieren.
Besonderheiten der Link-Funktionalität von <a>
Browser behandeln standardmäßig alle eingebauten Formularelemente (<input>, <select> und <button>-Elemente) in einem <fieldset disabled> als deaktiviert und verhindern sowohl Tastatur- als auch Maus-Interaktionen mit diesen. Falls dein Formular allerdings auch <a ... class="btn btn-*">-Elemente enthält, erhalten diese einfach nur den Stil pointer-events: none. Wie im Abschnitt über die deaktivierte Ansicht für Buttons (und ausdrücklich im Unterabschnitt für Anchor-Elemente) erklärt, ist diese CSS-Eigenschaft noch nicht standardisiert und wird in Opera 18 und älter oder in Internet Explorer 11 nicht vollständig unterstützt, und wird daher Tastatur-Nutzer nicht daran hindern, diese Links fokussieren oder aktivieren zu können. Um ganz sicherzugehen, solltest du daher eigenes JavaScript verwenden, um solche Links zu deaktivieren.
Browser-Kompatibilität
Obwohl Bootstrap diese Stile in allen Browsern anwendet, unterstützen Internet Explorer 11 und ältere Versionen das Attribut disabled bei einem <fieldset> nicht vollständig. Verwende eigenes JavaScript, um die Interaktion mit Elementen in einem Fieldset in diesen Browsern zu deaktivieren.
<form>
<fieldset disabled>
<div class="form-group">
<label for="deaktiviertesEingabefeld">Deaktiviertes Feld</label>
<input type="text" id="deaktiviertesEingabefeld" class="form-control" placeholder="Deaktiviertes Feld">
</div>
<div class="form-group">
<label for="deaktiviertesAuswahlfeld">Deaktivierte Auswahl</label>
<select id="deaktiviertesAuswahlfeld" class="form-control">
<option>Deaktiviertes Menü</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Hier gibt es keinen Haken
</label>
</div>
<button type="submit" class="btn btn-primary">Abschicken</button>
</fieldset>
</form>Nur-Lesen-Ansicht
Füge das Boolean-Attribut readonly zu einem Formularfeld hinzu, um zu verhindern, dass der Wert des Felds verändert wird. Nur-Lesen-Felder sind etwas heller (genau wie deaktivierte Felder), behalten aber ihren normalen Cursor.
<input class="form-control" type="text" placeholder="Mich bitte nur lesen…" readonly>Hilfe-Text
Füge Textblöcke mit Hilfetexten für Formularfelder hinzu.
Hilfe-Text mit Formularelementen assoziieren
Hilfe-Text sollte mit dem Attribut aria-describedby ausdrücklich mit dem Formularelement assoziiert werden, auf das er sich bezieht. Dies stellt sicher, dass assistive Technologien wie Screenreader den Hilfe-Text vorlesen, wenn Nutzer das Element fokussieren oder hineingehen.
<label for="eingabefeldHilfeText">Eingabefeld mit Hilfe-Text</label>
<input type="text" id="eingabefeldHilfeText" class="form-control" aria-describedby="hilfeText">
...
<span id="hilfeText" class="help-block">Ein Block mit hilfreichem Text, der mehr als eine Zeile lang sein darf und bei Bedarf umbricht.</span>Formular-Überprüfung
Bootstrap beinhaltet Stile für Fehler-, Warnung- und Erfolg-Rückmeldungen bei Formularfeldern. Um sie zu verwenden, füge .has-warning, .has-error oder .has-success zum übergeordneten Element hinzu. Alle .control-label, .form-control und .help-block in diesem Element werden dann die Rückmeldungs-Stile erhalten.
Validierungsstatus an assistive Technologien und farbenblinde Nutzer vermitteln
Die Verwendung dieser Validierungsstile zur Bezeichnung des Status eines Formularelements führt nur zu einem visuellen, farbbasierten Hinweis, der Nutzern von assistiven Technologien - wie Screenreadern - oder farbenblinden Nutzern nicht vermittelt wird.
Sorge dafür, dass ein alternativer Hinweis auf den Status ebenfalls bereitgestellt wird. Zum Beispiel kannst du im Text des <label> des jeweiligen Formularelements selbst auf den Status hinweisen (wie im folgenden Beispiel), ein Glyphicon (mit angemessenem alternativen Text innerhalb der Klasse .sr-only - siehe die Glyphicon-Beispiele) hinzufügen, oder einen zusätzlichen Hilfetextblock zur Verfügung stellen. Für assistive Technologien im Besonderen können ungültige Formularfelder ein Attribut aria-invalid="true" zugewiesen bekommen.
<div class="form-group has-success">
<label class="control-label" for="eingabefeldErfolg1">Feld mit Erfolg</label>
<input type="text" class="form-control" id="eingabefeldErfolg1" aria-describedby="hilfeBlock2">
<span id="hilfeBlock2" class="help-block">Ein Block mit hilfreichem Text, der mehr als eine Zeile lang sein darf und bei Bedarf umbricht.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="eingabefeldWarnung1">Feld mit Warnung</label>
<input type="text" class="form-control" id="eingabefeldWarnung1">
</div>
<div class="form-group has-error">
<label class="control-label" for="eingabefeldFehler1">Feld mit Fehler</label>
<input type="text" class="form-control" id="eingabefeldFehler1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="ankreuzfeldErfolg" value="option1">
Ankreuzfeld mit Erfolg
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="ankreuzfeldWarnung" value="option1">
Ankreuzfeld mit Warnung
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="ankreuzfeldFehler" value="option1">
Ankreuzfeld mit Fehler
</label>
</div>
</div>Mit optionalen Icons
Du kannst optional außerdem passende Icons hinzufügen, indem du die Klasse .has-feedback und das richtige Icon ergänzt.
Feedback-Icons funktionieren nur mit <input class="form-control">-Elementen, in die man Text eingeben kann.
Icons, Labels und Input-Gruppen
Die Feedback-Icons müssen manuell positioniert werden, wenn du sie mit Feldern ohne Label oder mit Input-Gruppen mit einem Add-on auf der rechten Seite verwendest. Es wird aus Gründen der Barrierefreiheit dringend empfohlen, Labels für alle Felder anzugeben. Falls du die Anzeige von Labels verhindern möchtest, verberge sie mit der Klasse sr-only. Falls du wirklich keine Labels einfügen kannst, musst du den Wert für top beim Feedback-Icon anpassen. Ändere bei Input-Grupen den Standard right: 0; zu einem sinnvollen Pixel-Wert, abhängig von der Breite deines Add-ons.
Bedeutung des Icons an assistive Technologien vermitteln
Um sicherzustellen, dass assistive Technologien wie Screenreader die Bedeutung eines Icons korrekt wiedergeben, sollte zusätzlicher verborgener Text mit Hilfe der Klasse .sr-only eingebunden werden und über das Attribut aria-describedby ausdrücklich mit dem Formularelement, auf das er sich bezieht, verknüpft werden. Alternativ solltest du sicherstellen, dass die Bedeutung (z.B. die Tatsache, dass es eine Warnung für ein bestimmtes Textfeld gibt) in irgendeiner anderen Form vermittelt wird, z.B. durch Veränderung des eigentlichen, mit dem Formularelement verknüpften <label>.
Obwohl die folgenden Beispiele den Validierugnsstatus ihrer jeweiligen Formularelemente im <label>-Text selbst bereits einbinden, wurde die obige Methode (die Verwendung von Text in .sr-only und aria-describedby) zur Illustration zusätzlich hinzugefügt.
<div class="form-group has-success has-feedback">
<label class="control-label" for="eingabefeldErfolg2">Feld mit Erfolg</label>
<input type="text" class="form-control" id="eingabefeldErfolg2" aria-describedby="eingabefeldErfolg2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="eingabefeldErfolg2Status" class="sr-only">(Erfolg)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="eingabefeldWarnung2">Feld mit Warnung</label>
<input type="text" class="form-control" id="eingabefeldWarnung2" aria-describedby="eingabefeldWarnung2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="eingabefeldWarnung2Status" class="sr-only">(Warnung)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="eingabefeldFehler2">Feld mit Fehler</label>
<input type="text" class="form-control" id="eingabefeldFehler2" aria-describedby="eingabefeldFehler2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="eingabefeldFehler2Status" class="sr-only">(Fehler)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGruppeErfolg1">Input-Gruppe mit Erfolg</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGruppeErfolg1" aria-describedby="inputGruppeErfolg1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGruppeErfolg1Status" class="sr-only">(Erfolg)</span>
</div>Optionale Icons in horizontalen und einzeiligen Formularen
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="eingabefeldErfolg3">Feld mit Erfolg</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="eingabefeldErfolg3" aria-describedby="eingabefeldErfolg3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="eingabefeldErfolg3Status" class="sr-only">(Erfolg)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGruppeErfolg2">Input-Gruppe mit Erfolg</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGruppeErfolg2" aria-describedby="inputGruppeErfolg2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGruppeErfolg2Status" class="sr-only">(Erfolg)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="eingabefeldErfolg4">Feld mit Erfolg</label>
<input type="text" class="form-control" id="eingabefeldErfolg4" aria-describedby="eingabefeldErfolg4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="eingabefeldErfolg4Status" class="sr-only">(Erfolg)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGruppeErfolg3">Input-Gruppe mit Erfolg</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGruppeErfolg3" aria-describedby="inputGruppeErfolg3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGruppeErfolg3Status" class="sr-only">(Erfolg)</span>
</div>
</form>Optionale Icons mit versteckten .sr-only-Labels
Falls du die Klasse .sr-only verwendest, um das <label> einer Formularschaltfläche zu verbergen (statt andere Labelling-Optionen wie das Attribut aria-label zu nutzen), wird Bootstrap die Position des Icons automatisch anpassen, sobald es hinzugefügt wurde.
(Erfolg)
@
(Erfolg)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="eingabefeldErfolg5">Verstecktes Label</label>
<input type="text" class="form-control" id="eingabefeldErfolg5" aria-describedby="eingabefeldErfolg5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="eingabefeldErfolg5Status" class="sr-only">(Erfolg)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGruppeErfolg4">Input-Gruppe mit Erfolg</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGruppeErfolg4" aria-describedby="inputGruppeErfolg4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGruppeErfolg4Status" class="sr-only">(Erfolg)</span>
</div>Größe
Leg Höhen mit Klassen wie .input-lg fest und veränder die Breite von Feldern mit Raster-Klassen wie .col-lg-*.
Höhenveränderung
Erstelle höhere oder niedrigere Formularfelder, deren Höhe mit Button-Größen übereinstimmt.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Standard-Größe">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>Größen in horizontalen Formularen
Lege die Größe von Labels und Formularelementen in .form-horizontal einfach und schnell fest, indem du .form-group-lg oder .form-group-sm hinzufügst.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formularGruppenFeldGross">Großes Label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formularGruppenFeldGross" placeholder="Großes Feld">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formularGruppenFeldKlein">Kleines Label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formularGruppenFeldKlein" placeholder="Kleines Feld">
</div>
</div>
</form>Breitenveränderung mit Spalten
Verpacke Felder in Raster-Spalten oder eigens angepassten übergeordneten Elementen, um auf einfache Weise gewünschte Breiten festzulegen.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>Buttons
Button-Tags
Du kannst die Button-Klassen mit den Elementen <a>, <button> oder <input> verwenden.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">Kontext-spezifische Verwendung
Obwohl Button-Klassen mit den Elementen <a> und <button> funktionieren, werden nur <button>-Elemente in unseren Navs und Navbars unterstützt.
Links, die sich wie Buttons verhalten
Wenn <a>-Elemente verwendet werden wie Buttons – um Funktionen auf der Seite zu aktivieren, statt zu einem anderen Dokument oder anderen Abschnitt auf der aktuellen Seite zu führen – sollten sie passenderweise das Attribut role="button" zugewiesen bekommen.
Cross-Browser-Kompatibilität
Als Erfolgsmethode empfehlen wir stärkstens, das Element <button> wann immer möglich zu verwenden, um sicherzustellen, dass die Buttons über verschiedene Browser hinweg gleich gut aussehen.
Unter anderem gibt es einen Bug in Firefox <30, der uns daran hindert, die line-height von Buttons, die auf <input> basieren, zu setzen, was dazu führt, dass sie nicht die exakt gleiche Höhe wie andere Buttons in Firefox haben.
Optionen
Verwende irgendwelche der verfügbaren Button-Klassen, um ganz schnell einen schön gestalteten Button zu erstellen.
<!-- Standard-Button -->
<button type="button" class="btn btn-default">Standard</button>
<!-- Wertet den Button visuell auf und zeigt den wichtigsten von mehreren Buttons an -->
<button type="button" class="btn btn-primary">Primär</button>
<!-- Zeigt eine erfolgreiche oder positive Aktion an -->
<button type="button" class="btn btn-success">Erfolg</button>
<!-- Kontext-Button für informative Mitteilungen -->
<button type="button" class="btn btn-info">Info</button>
<!-- Zeigt an, dass bei dieser Aktion Vorsicht geboten ist -->
<button type="button" class="btn btn-warning">Warnung</button>
<!-- Zeigt eine gefährliche oder evtl. negative Aktion an -->
<button type="button" class="btn btn-danger">Gefahr</button>
<!-- Stufe einen Button herab, indem ihn wie einen Link aussehen lässt, aber Button-Verhalten beibehältst -->
<button type="button" class="btn btn-link">Link</button>Bedeutungen an assistive Technologien vermitteln
Die Verwendung von Farbe, um eine Bedeutung zu einem Button hinzuzufügen, erzeugt nur einen visuellen Hinweis, der Nutzern von assistiven Technologien wie Screenreadern nicht vermittelt werden kann. Stell sicher, dass durch Farbe bezeichnete Informationen entweder durch den Inhalt selbst (den sichtbaren Text des Buttons) offensichtlich sind oder über alternative Wege eingebunden sind, wie z.B. zusätzlicher Text, der mit der Klasse .sr-only verborgen wird.
Größe
Du magst lieber größere oder kleinere Buttons? Füge .btn-lg, .btn-sm oder .btn-xs für weitere Größen hinzu.
<p>
<button type="button" class="btn btn-primary btn-lg">Großer Button</button>
<button type="button" class="btn btn-default btn-lg">Großer Button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Standard-Button</button>
<button type="button" class="btn btn-default">Standard-Button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Kleiner Button</button>
<button type="button" class="btn btn-default btn-sm">Kleiner Button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra-kleiner Button</button>
<button type="button" class="btn btn-default btn-xs">Extra-kleiner Button</button>
</p>Erstelle Buttons, die die gesamte Breite ihres übergeordneten Elements einnehmen, indem du .btn-block hinzufügst.
<button type="button" class="btn btn-primary btn-lg btn-block">Block-Button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block-Button</button>Aktiv-Ansicht
Buttons erhalten eine "gedrückte" Ansicht (dunkler Hintergrund, dunkler Rahmen, Schattierung), wenn sie aktiv sind. Für <button>-Elemente geschieht dies über :active. Für <a>-Elemente wird .active verwendet. Allerdings kannst du .active auch für <button>s verwenden (und das Attribut aria-pressed="true" hinzufügen), wenn du den Aktiv-Status manuell anzeigen willst.
Button-Element
:active ist eine Pseudo-Klasse und muss daher nicht manuell hinzugefügt werden. Falls du die Ansicht erzwingen möchtest, kein Problem, füg einfach .active ein.
<button type="button" class="btn btn-primary btn-lg active">Primärer Button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>Anchor-Element
Füge die .active-Klasse zu <a>-Buttons hinzu.
<a href="#" class="btn btn-primary btn-lg active" role="button">Primärer Link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>Deaktivierte Ansicht
Lass Buttons so aussehen, als könnte man sie nicht anklicken, indem du ihr Erscheinungsbild mit Hilfe von opacity reduzierst.
Button-Element
Füge das disabled-Attribut zu <button>s hinzu.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primärer Button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>Browser-Kompatibilität
Wenn du das Attribut disabled zu einem <button> hinzufügst, generiert Internet Explorer 9 und älter einen ekligen grauen Schatten an grauem Text, was wir nicht beheben können.
Anchor-Element
Füge die Klasse .disabled bei einem <a>-Button ein.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primärer Link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
Wir verwenden .disabled hier als eine Hilfsklasse, so ähnlich wie die weit verbreitete .active-Klasse, deshalb gibt es hier kein Präfix.
Probleme mit Link-Funktionalität
Diese Klasse verwendet pointer-events: none, um zu versuchen, die Link-Funktionalität von <a>-Buttons zu deaktivieren, diese Eigenschaft ist allerdings noch nicht standardisiert und wird von Opera 18 und älter sowie Internet Explorer 11 nicht rundum unterstützt. Außerdem ist auch in Browsern, die pointer-events: none unterstützen, die Navigation über die Tastatur nicht eingeschränkt. Das bedeutet, dass sehende Tastaturnutzer und Nutzer von assistiven Technologien diese Links weiterhin aktivieren können. Um wirklich sicherzugehen, solltest du solche Links mit eigenem JavaScript deaktivieren.
Bilder
Responsive Bilder
Bilder in Bootstrap 3 können sich automatisch dem Bildschirm anpassen, wenn du die Klasse .img-responsive hinzufügst. Diese wendet max-width: 100%;, height: auto; und display: block; auf das Bild an, so dass es sich wunderbar dem übergeordneten Element anpasst.
Um Bilder zu zentrieren, die die Klasse .img-responsive verwenden, musst du .center-block statt .text-center verwenden. Siehe den zugehörigen Abschnitt bei den Hilfsklassen für mehr Details zur Verwendung von .center-block.
SVG-Bilder und IE 8-10
In Internet Explorer 8-10 werden SVG-Bilder mit .img-responsive in einem falschen Seitenverhältnis angezeigt. Um dies zu beheben, kannst du bei Bedarf width: 100% \9; verwenden. Bootstrap wendet dies nicht automatisch an, da es Komplikationen bei anderen Bild-Formaten verursacht.
<img src="..." class="img-responsive" alt="Responsives Bild">Bilder-Konturen
Füge Klassen zu <img>-Elementen hinzu, um Bilder in jedem Projekt ganz einfach zu gestalten.
Browser-Kompatibilität
Denk daran, dass es im Internet Explorer 8 keine Unterstützung von abgerundeten Ecken gibt.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Hilfsklassen
Kontext-Farben
Versehe jeden Text mit mehr Bedeutung, indem du die Hilfsklassen für Kontextfarben verwendest. Wenn sie direkt oder indirekt auf einen Link angewendet werden, wird die Farbe verdunkelt, wenn sich der Mauszeiger darüber befindet (hover), genau wie bei normalen Links.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>Probleme mit Spezifität
Diese Klassen funktionieren manchmal nicht, weil die Genauigkeit eines anderen Selektors größer ist. Meistens reicht es in diesen Fällen, deinen Text in einem <span> mit der jeweiligen Klasse zu verpacken.
Bedeutungen an assistive Technologien vermitteln
Die Verwendung von Farbe, um eine Bedeutung zu einem Button hinzuzufügen, erzeugt nur einen visuellen Hinweis, der Nutzern von assistiven Technologien wie Screenreadern nicht vermittelt werden kann. Stell sicher, dass durch Farbe bezeichnete Informationen entweder durch den Inhalt selbst (den sichtbaren Text des Buttons) offensichtlich sind oder über alternative Wege eingebunden sind, wie z.B. zusätzlicher Text, der mit der Klasse .sr-only verborgen wird.
Kontext-Hintergründe
Ähnlich wie die Kontext-Farben für Text, gibt es auch Kontext-Hintergründe. Link-Farben werden auch hier wieder etwas angepasst, um zu den Hintergründen zu passen.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>Umgang mit Genauigkeit
Manchmal können Kontext-Hintergrund-Klassen nicht angewendet werden, weil andere Stile zu spezifisch definiert sind. In einigen Fällen reicht es, den Inhalt deines Elements in einem <div> mit der Klasse zu verpacken.
Bedeutungen an assistive Technologien vermitteln
Genau wie bei Kontext-Farben, solltest du sicherstellen, dass besondere durch Farbe ausgewiesene Bedeutungen auch in einem Format übermittelt werden, das nicht rein visuell ist.
Schließen-Symbol
Verwende das generische Schließen-Symbol für das Schließen von Inhalten wie Modals oder Warnhinweisen.
<button type="button" class="close" aria-label="Schließen"><span aria-hidden="true">×</span></button>Carets
Verwende Carets (kleine Pfeile ohne Strich), um die Funktionalität und Richtung von Dropdown-Menüs und ähnlichen Komponenten anzuzeigen. Beachte, dass das Caret in Dropup-Menüs automatisch umgedreht wird.
<span class="caret"></span>Einfache Floats
Füge mit einer Klasse einen CSS-Float zu einem Element hinzu. Damit Spezifität keine Probleme macht, wird hier !important verwendet. Die Klassen können auch als Mixins verwendet werden.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Klassen
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Verwendung als Mixins
.element {
.pull-left();
}
.anderes-element {
.pull-right();
}Blockzentrierung
Setze ein Element auf display: block und zentriere es über margin. Verfügbar als Mixin und Klasse.
<div class="center-block">...</div>// Klasse
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Verwendung als Mixin
.element {
.center-block();
}Clearfix
Setze ganz einfach floats bei einem Element zurück, indem du .clearfix zum übergeordneten Element hinzufügst. Verwendet das Micro-Clearfix, bekannt gemacht von Nicolas Gallagher. Kann auch als Mixin verwendet werden.
<!-- Verwendung als Klasse -->
<div class="clearfix">...</div>// Mixin selbst
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Verwendung als Mixin
.element {
.clearfix();
}Inhalte anzeigen/verbergen
Erzwinge, dass ein Element gezeigt oder ausgeblendet wird (Screenreader inbegriffen) mit Hilfe der Klassen .show und .hidden. Diese Klassen verwenden !important, um Probleme mit Spezifität zu vermeiden, genau so wie die einfachen Floats. Sie sind nur für das ein- und ausblenden von Block-Elementen verfügbar. Sie können auch als Mixin verwendet werden.
.hide ist verfügbar, wirkt sich aber nicht immer auf Screenreader aus und wurde mit v3.0.1 als veraltet markiert. Verwende stattdessen .hidden oder .sr-only.
Außerdem kannst du .invisible verwenden, um die Sichtbarkeit eines Elements zu verändern, ohne dass das Element wirklich aus dem Fluss des Dokuments verschwindet (display wird nicht verändert).
<div class="show">...</div>
<div class="hidden">...</div>// Klassen
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Verwendung als Mixins
.element {
.show();
}
.anderes-element {
.hidden();
}Inhalte für Screenreader und Navigation über Tastatur
Verberge ein Element vor allen Geräten außer Screenreadern mit .sr-only. Kombiniere .sr-only mit .sr-only-focusable, um das Element anzuzeigen, wenn es fokussiert wird (z.B. für einen Benutzer, der nur eine Tastatur verwendet). Notwendig, um den optimalen Vorgehensweisen für Barrierefreiheit Folge zu leisten. Kann auch als Mixin verwendet werden.
<a class="sr-only sr-only-focusable" href="#content">Zum Hauptinhalt springen</a>// Verwendung als Mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}Bildersetzung
Verwende die Klasse .text-hide, um dabei zu helfen, den Text eines Elements mit einem Hintergrundbild zu ersetzen.
<h1 class="text-hide">Beispiel-Überschrift</h1>// Verwendung als Mixin
.heading {
.text-hide();
}Responsive Hilfsmittel
Für schnellere Entwicklung von Seiten, die gut auf mobilen Geräten aussehen, gibt es diese Hilfsklassen, mit denen du über Media-Queries Inhalte pro Gerät ein- und ausblenden kannst. Außerdem gibt es Hilfsklassen für das Ein- und Ausblenden von Inhalt für den Druck eines Dokuments.
Versuche, diese Klassen nur eingeschränkt zu verwenden und vermeide es, damit ganz verschiedene Versionen der gleichen Seite zu erstellen. Verwende sie stattdessen, um die Anzeige auf jedem Gerät stimmig zu machen.
Verfügbare Klassen
Verwende einzelne oder eine Kombination der verfügbaren Klassen, um Inhalt auf verschiedenen Anzeigefenstergrößen ein- und auszublenden.
| Extra-kleine Geräte Smartphones (<768px) | Kleine Geräte Tablets (≥768px) | Mittlere Geräte Desktop-PCs (≥992px) | Große Geräte Desktop-PCs (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Sichtbar | Verborgen | Verborgen | Verborgen |
.visible-sm-* |
Verborgen | Sichtbar | Verborgen | Verborgen |
.visible-md-* |
Verborgen | Verborgen | Sichtbar | Verborgen |
.visible-lg-* |
Verborgen | Verborgen | Verborgen | Sichtbar |
.hidden-xs |
Verborgen | Sichtbar | Sichtbar | Sichtbar |
.hidden-sm |
Sichtbar | Verborgen | Sichtbar | Sichtbar |
.hidden-md |
Sichtbar | Sichtbar | Verborgen | Sichtbar |
.hidden-lg |
Sichtbar | Sichtbar | Sichtbar | Verborgen |
Ab v3.2.0 gibt es .visible-*-*-Klassen für jeden Umbruchpunkt in drei Variationen, eine für jeden der unten aufgeführten Werte der CSS-Eigenschaft display.
| Gruppe von Klassen | CSS display |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Die verfügbaren .visible-*-*-Klassen für sehr kleine (xs) Bilschirme sind also zum Beispiel: .visible-xs-block, .visible-xs-inline und .visible-xs-inline-block.
Die Klassen .visible-xs, .visible-sm, .visible-md und .visible-lg bleiben weiterhin bestehen, sind aber ab v3.2.0 als veraltet markiert. Sie entsprechen in etwa .visible-*-block, abgesehen von besonderen Ergänzungen für Elemente rund um <table>.
Klassen für den Druck
So ähnlich wie die normalen responsiven Klassen gibt es auch noch Klassen für das Ein- und Ausblenden beim Druck.
| Klassen | Browser | Druck |
|---|---|---|
.visible-print-block
.visible-print-inline
.visible-print-inline-block
|
Verborgen | Sichtbar |
.hidden-print |
Sichtbar | Verborgen |
Die Klasse .visible-print bleibt weiterhin bestehen, ist aber ab v3.2.0 als veraltet markiert. Sie entspricht in etwa .visible-print-block, abgesehen von besonderen Ergänzungen für Elemente rund um <table>.
Test-Ansicht
Verändere die Größe deines Browser-Fensters oder lade diese Seite auf verschiedenen Geräten, um die responsiven Hilfsmittel zu testen.
Sichtbar auf...
Grüne Häkchen zeigen an, dass das Element in deinem aktuellen Anzeigefenster sichtbar ist.
Extra-klein
✔ Sichtbar auf X-klein
Klein
✔ Sichtbar auf Klein
Mittel
✔ Sichtbar auf Mittel
Groß
✔ Sichtbar auf Groß
✔ Sichtbar auf X-klein und Klein
✔ Sichtbar auf Mittel und Groß
✔ Sichtbar auf X-klein und Mittel
✔ Sichtbar auf Klein und Groß
✔ Sichtbar auf X-klein und Groß
✔ Sichtbar auf Klein und Mittel
Verborgen auf...
Hier zeigen die grünen Häkchen an, dass das Element in deinem Anzeigefenster verborgen ist.
Less verwenden
Bootstraps CSS wird mit Less gemacht, einem Präprozessor mit zusätzlichen Funktionen wie Variablen, Mixins und Funktionen für das Kompilieren von CSS. Wer statt unseren kompilierten CSS-Dateien lieber die Quell-Less-Dateien verwendet, kann die zahlreichen Variablen und Mixins nutzen, die wir im gesamten Framework einsetzen.
Raster-Variablen und -Mixins sind im Abschnitt über das Rastersystem beschrieben.
Bootstrap kompilieren
Bootstrap kann auf mindestens zwei Arten genutzt werden: mit dem kompilierten CSS oder mit den ursprünglichen Less-Dateien. Um die Less-Dateien zu kompilieren, lies unter Los geht's! nach, wie du deine Entwicklungsumgebung für die notwendigen Befehle einrichten kannst.
Andere, dritte Kompilierer funktionieren vielleicht mit Bootstrap, werden aber von unserem Hauptteam nicht unterstützt.
Variablen
Variablen werden im gesamten Projekt immer wieder verwendet, um häufig verwendete Werte wie Farben, Abstände, Größen oder Schriften zu zentralisieren und zu teilen. Eine gesamte Übersicht über alle Variablen und ihre Funktionen findest du in der englischsprachigen Dokumentation im Customizer.
Farben
Benutze ganz einfach zwei Farbschemas: Graustufen und Semantik. Graustufen bieten einfachen Zugriff auf häufig verwendete Abstufungen von schwarz, während die Semantik verschiedene Farben mit bedeutsamem Kontextbezug enthält.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;Verwende diese Farbvariablen so wie sie sind oder weise sie wiederum anderen, bedeutsameren Variablen in deinem Projekt zu.
// Verwendung wie sie sind
.masthead {
background-color: @brand-primary;
}
// Variablen neu zuweisen in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Grundgerüst
Eine Reihe von Variablen, um schnell wichtige Elemente im Aufbau deiner Seite zu verändern.
// Grundgerüst
@body-bg: #fff; // Seitenhintergrund
@text-color: @black-50; // FließtextfarbeLinks
Gestalte die Farbe deiner Links um, indem du nur einen Wert veränderst.
// Variablen
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Verwendung
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}Beachte, dass @link-hover-color eine Funktion verwendet (ein anderes tolles Werkzeug in Less), die automagisch die richtige Hover-Farbe für Links generiert. Du kannst darken, lighten, saturate und desaturate verwenden.
Typografie
Lege ganz einfach Schriftart, Textgröße, Durchschuss und vieles mehr mit einigen wenigen Variablen fest. Bootstrap verwendet diese ebenfalls, um einfache typografische Mixins bereitzustellen.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;Icons
Zwei Variablen entscheiden, wo deine Icons sich befinden und wie ihre Dateien heißen.
@icon-font-path: "/fonts/";
@icon-font-name: "glyphicons-halflings-regular";Komponenten
Komponenten überall in Bootstrap verwenden diese Standard-Variablen, um einige übliche Werte festzulegen. Hier sind einige der am häufigsten genutzten.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;Hersteller-Mixins
Hersteller-Mixins helfen dir dabei, bestimmte CSS-Eigenschaften umzusetzen, bei denen für einige Browser herstellereigene Präfixe erforderlich sind.
Box-sizing
Definiere das box model deiner Site oder Anwendung mit einem einzigen Mixin. Mehr Informationen findest du in diesem hilfreichen Artikel von Mozilla.
Dieses Mixin ist ab v3.2.0 als veraltet markiert und wurde durch Autoprefixer ersetzt. Um Rückwärtskompatibilität zu bewahren, wird Bootstrap das Mixin bis Bootstrap v4 weiterhin intern verwenden.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Abgerundete Ecken
Inzwischen unterstütztn alle modernen Browser die border-radius-Eigenschaft ohne besondere Präfixe. Es gibt daher kein .border-radius()-Mixin aber Bootstrap bietet dir einige Hilfs-Mixins, mit denen du schnell und einfach zwei Ecken auf einer Seite eines Objekts abrunden kannst.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}Box (Drop) shadows
Falls deine Zielgruppe bzw. dein Publikum die neuesten und besten Browser und Geräte verwendet, reicht es, einfach die Eigenschaft box-shadow ohne Präfixe zu verwenden. Falls du allerdings ältere Android- (vor v4) und iOS-Geräte (vor iOS 5) unterstützen willst, kannst du dieses als veraltet markierte Mixin verwenden, um das benötigte -webkit-Präfix hinzuzufügen.
Das Mixin ist seit v3.1.0 als veraltet markiert, da Bootstrap die älteren Plattformen ohne Unterstützung für die Standard-Eigenschaft ohne Präfix nicht unterstützt. Um Rückwärtskompatibilität beizubehalten, wird das Mixin bis Bootstrap v4 weiterhin verfügbar sein und genutzt werden.
Am besten verwendest du rgba()-Farben in deinen Box-Shadows, damit diese so nahtlos wie möglich in deine Hintergründe übergehen.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Übergänge
Mehrere Mixins für Flexibilität. Leg alle Übergangsdetails mit einem fest oder definiere eine separate Verzögerung und Länge, wie es für dich am besten passt.
Dieses Mixin ist ab v3.2.0 als veraltet markiert und wurde durch Autoprefixer ersetzt. Um Rückwärtskompatibilität zu bewahren, wird Bootstrap das Mixin bis Bootstrap v4 weiterhin intern verwenden.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}Transformationen
Drehe, skaliere, bewege oder kippe irgendein object.
Dieses Mixin ist ab v3.2.0 als veraltet markiert und wurde durch Autoprefixer ersetzt. Um Rückwärtskompatibilität zu bewahren, wird Bootstrap das Mixin bis Bootstrap v4 weiterhin intern verwenden.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // nur IE9
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // nur IE9
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // nur IE9
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // Siehe https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // nur IE9
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // nur IE9
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // nur IE9
transform-origin: @origin;
}Animationen
Ein einzelnes Mixin für alle CSS3-Animations-Eigenschaften in einem CSS-Block und weitere Mixins für einzelne Eigenschaften.
Dieses Mixin ist ab v3.2.0 als veraltet markiert und wurde durch Autoprefixer ersetzt. Um Rückwärtskompatibilität zu bewahren, wird Bootstrap das Mixin bis Bootstrap v4 weiterhin intern verwenden.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}Undurchsichtigkeit / Trübung
Lege die Trübung für alle Browser fest und stelle eine filter-Notlösung für IE8 bereit.
.opacity(@opacity) {
opacity: @opacity;
// IE8-filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Platzhalter-Text
Versehe Formularfelder mit Kontext in jedem Feld.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari und Chrome
}Spalten
Generiere Spalten über CSS in einem einzigen Element.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}Verlaufsfarben
Verwandel zwei Farben ohne Probleme in einen Hintergrundverlauf. Geh einen Schritt weiter und lege eine Richtung, drei Farben oder einen radialen Verlauf fest. Mit einem einzelnen Mixin kriegst du alle Eigenschaften mit Präfix, die du brauchst.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Du kannst auch den Winkel eines normalen, linearen Zweifarbverlaufs festlegen:
#gradient > .directional(#333; #000; 45deg);Fallst du einen Verlauf mit Streifen brauchst, ist das auch kein Problem. Leg einfach eine einzelne Farbe fest und wir legen einen durchscheinenden weißen Streifen darüber.
#gradient > .striped(#333; 45deg);Lass die Korken knallen und nimm stattdessen drei Farben. Lege die erste Farbe, die zweite Farbe, den Farbstopp der zweiten Farbe (ein Prozentwert wie 25%) und die dritte Farbe mit diesen Mixins fest:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Aufgepasst! Wenn du einen Farbverlauf einmal entfernen musst, denk daran IE-spezifische filter zu entfernen, die du evtl. hinzugefügt hast. Du kannst das mit dem .reset-filter()-Mixin zusammen mit background-image: none; bewerkstelligen.
Hilfsmittel-Mixins
Hilfsmittel-Mixins sind Mixins, die verschiedene CSS-Eigenschaften ohne eigentlichen Bezug kombinieren, um einen bestimmten Effekt oder ein bestimmtes Ziel zu erreichen.
Clearfix
Ergänze nicht jedes Mal class="clearfix" bei einem Element und füge stattdessen das .clearfix()-Mixin da ein, wo es angebracht ist. Verwendet das Micro-Clearfix von Nicolas Gallagher.
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Verwendung
.container {
.clearfix();
}Horizontale Zentrierung
Zentriere ein Element ohne Umstände in seinem übergeordneten Element. Die (maximale) Breite (width oder max-width) des Elements muss festgelegt sein.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Verwendung
.container {
width: 940px;
.center-block();
}Größen-Helferchen
Definiere die Dimensionen eines Objekt auf eine einfachere Weise.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Verwendung
.image { .size(400px; 300px); }
.avatar { .square(48px); }Textfläche mit veränderbarer Größe
Konfiguriere die Optionen zur Größenveränderung einer Textfläche oder eines anderen Elements. Der Standard ist das normale Browser-Verhalten (both).
.resizable(@direction: both) {
// Optionen: horizontal, vertical, both
resize: @direction;
// Safari-Fix
overflow: auto;
}Text kürzen
Text kannst du ganz leicht mit Auslassungspunkten und einem einzigen Mixin kürzen lassen. Das Element muss dazu block oder inline-block sein.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Verwendung
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Retina-Bilder
Lege zwei Pfade zu Bildern und die @1x-Bild-Dimensionen fest und Bootstrap fügt einen @2x-Media-Query hinzu. Falls du sehr viele Bilder auf diese Weise anzeigen willst, überleg dir, dein CSS für Retina-Bilder lieber manuell in einen einzelnen großen Media-Query zu schreiben.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Verwendung
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}Sass verwenden
Während Bootstrap auf Less-Basis erstellt wurde, hat es auch einen offiziellen Sass-Port. Wir verwalten diesen in einem separaten GitHub-Repository und regeln Updates über ein Konversionsskript.
Was zur Verfügung steht
Da der Sass-Port ein separates Repo hat und auf ein etwas anderes Publikum zugeschnitten ist, enthält das Projekt sehr viele andere Dateien als das Haupt-Bootstrap-Projekt. Das stellt sicher, dass der Sass-Port kompatibel mit so vielen Sass-basierten Systemen wie möglich ist.
| Pfad | Beschreibung |
|---|---|
lib/ |
Code für Ruby-Gem (Sass-Konfiguration, Rails- und Compass-Integrationen) |
tasks/ |
Konversionsskripte (verwandeln unser Less in Sass) |
test/ |
Kompilierungstests |
templates/ |
Compass-Paket-Manifest |
vendor/assets/ |
Sass-, JavaScript- und Schrift-Dateien |
Rakefile |
Interne Aufgaben wie rake und convert |
Schau im GitHub-Repository des Sass-Ports vorbei, um diese Dateien in Aktion zu sehen.
Installation
Für Informationen über die Installation und Verwendung von Bootstrap für Sass solltest du die README-Datei im GitHub-Repository lesen. Diese ist die aktuellste Quelle und beinhaltet Informationen für die Verwendung mit Rails, Compass und normalen Sass-Projekten.