Informieren Sie sich über die Schlüsselelemente der Infrastruktur von Bootstrap, einschließlich unseres Ansatzes für eine bessere, schnellere und stärkere Webentwicklung.

HTML5-Dokumenttyp

Bootstrap verwendet bestimmte HTML-Elemente und CSS-Eigenschaften, die die Verwendung des HTML5-Dokumenttyps erfordern. Fügen Sie es am Anfang all Ihrer Projekte hinzu.

<!doctype html>
<html lang="en">
  ...
</html>

Zuerst mobil

Mit Bootstrap 2 haben wir optionale mobilfreundliche Stile für Schlüsselaspekte des Frameworks hinzugefügt. Mit Bootstrap 3 haben wir das Projekt von Anfang an mobilfreundlich umgeschrieben. Anstatt optionale mobile Stile hinzuzufügen, sind sie direkt in den Kern integriert. Tatsächlich ist Bootstrap zuerst mobil . Mobile-First-Styles sind in der gesamten Bibliothek statt in separaten Dateien zu finden.

Um ein korrektes Rendern und Zoomen per Touch sicherzustellen, fügen Sie das Viewport-Meta-Tag zu Ihrer <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Sie können die Zoomfunktionen auf Mobilgeräten deaktivieren, indem Sie user-scalable=nodem Viewport-Meta-Tag hinzufügen. Dadurch wird das Zoomen deaktiviert, was bedeutet, dass Benutzer nur scrollen können, und führt dazu, dass sich Ihre Website ein bisschen mehr wie eine native Anwendung anfühlt. Insgesamt empfehlen wir dies nicht auf jeder Seite, seien Sie also vorsichtig!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Typografie und Links

Bootstrap legt grundlegende globale Anzeige-, Typografie- und Linkstile fest. Insbesondere wir:

Stellen Sie background-color: #fff;auf diebody
Verwenden Sie die Attribute @font-family-base, @font-size-base, und als unsere typografische Basis@line-height-base
Legen Sie die globale Linkfarbe über @link-colorfest und wenden Sie Linkunterstreichungen nur an an:hover

Diese Stile finden Sie in scaffolding.less.

Normalisieren.css

Für ein verbessertes Cross-Browser-Rendering verwenden wir Normalize.css , ein Projekt von Nicolas Gallagher und Jonathan Neal .

Behälter

Bootstrap benötigt ein enthaltendes Element, um den Inhalt der Website einzuschließen und unser Grid-System zu beherbergen. Sie können einen von zwei Containern zur Verwendung in Ihren Projekten auswählen. Beachten Sie, dass aufgrund von paddingund mehr keiner der Container verschachtelbar ist.

.containerFür einen ansprechenden Container mit fester Breite verwenden .

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

Verwenden Sie dies .container-fluidfür einen Container in voller Breite, der sich über die gesamte Breite Ihres Darstellungsbereichs erstreckt.

<div class="container-fluid">
  ...
</div>

Bootstrap enthält ein reaktionsfähiges, mobiles First-Fluid-Grid-System, das mit zunehmender Größe des Geräts oder des Darstellungsbereichs entsprechend auf bis zu 12 Spalten skaliert wird. Es enthält vordefinierte Klassen für einfache Layoutoptionen sowie leistungsstarke Mixins zum Generieren semantischerer Layouts .

Einführung

Rastersysteme werden zum Erstellen von Seitenlayouts durch eine Reihe von Zeilen und Spalten verwendet, die Ihre Inhalte enthalten. So funktioniert das Bootstrap-Grid-System:

Zeilen müssen innerhalb von .container(fester Breite) oder .container-fluid(voller Breite) platziert werden, um eine ordnungsgemäße Ausrichtung und Auffüllung zu gewährleisten.
Verwenden Sie Zeilen, um horizontale Gruppen von Spalten zu erstellen.
Inhalt sollte in Spalten platziert werden, und nur Spalten können unmittelbar untergeordnete Elemente von Zeilen sein.
Vordefinierte Rasterklassen wie .rowund .col-xs-4stehen zur schnellen Erstellung von Rasterlayouts zur Verfügung. Für semantischere Layouts können auch weniger Mixins verwendet werden.
Spalten erstellen Bundstege (Lücken zwischen Spalteninhalten) über padding. Diese Auffüllung wird in Zeilen für die erste und letzte Spalte über einen negativen Rand auf .rows versetzt.
Der negative Rand ist der Grund, warum die folgenden Beispiele ausgerückt sind. Es ist so, dass Inhalte innerhalb von Rasterspalten mit Nicht-Rasterinhalten ausgerichtet sind.
Rasterspalten werden erstellt, indem Sie die Anzahl der zwölf verfügbaren Spalten angeben, die Sie überspannen möchten. Zum Beispiel würden drei gleiche Spalten three verwenden .col-xs-4.
Wenn mehr als 12 Spalten in einer einzelnen Zeile platziert werden, wird jede Gruppe zusätzlicher Spalten als eine Einheit in eine neue Zeile umbrochen.
Grid-Klassen gelten für Geräte mit Bildschirmbreiten, die größer oder gleich den Breakpoint-Größen sind, und überschreiben Grid-Klassen, die auf kleinere Geräte ausgerichtet sind. Daher wirkt sich zB das Anwenden einer beliebigen .col-md-*Klasse auf ein Element nicht nur auf mittlere Geräte, sondern auch auf große Geräte aus, wenn eine .col-lg-*Klasse nicht vorhanden ist.

Sehen Sie sich die Beispiele an, um diese Prinzipien auf Ihren Code anzuwenden.

Medien-Anfragen

Wir verwenden die folgenden Medienabfragen in unseren Less-Dateien, um die wichtigsten Haltepunkte in unserem Rastersystem zu erstellen.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Wir erweitern diese Medienabfragen gelegentlich um ein max-width, um CSS auf eine engere Gruppe von Geräten zu beschränken.

@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) { ... }

Rasteroptionen

Sehen Sie anhand einer praktischen Tabelle, wie Aspekte des Bootstrap-Grid-Systems auf mehreren Geräten funktionieren.

	Extra kleine Geräte Telefone (<768px)	Kleine Geräte Tablets (≥768px)	Mittlere Geräte Desktops (≥992px)	Große Geräte Desktops (≥1200px)
Grid-Verhalten	Immer waagerecht	Zu Beginn eingeklappt, horizontal über Haltepunkten
Containerbreite	Keine (automatisch)	750px	970px	1170px
Klassenpräfix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# Spalten	12
Spaltenbreite	Auto	~62px	~81px	~97px
Stegbreite	30px (15px auf jeder Seite einer Spalte)
Nestbar	Ja
Offsets	Ja
Spaltenreihenfolge	Ja

Beispiel: Gestapelt bis horizontal

Mit einem einzigen Satz von .col-md-*Grid-Klassen können Sie ein grundlegendes Grid-System erstellen, das auf Mobilgeräten und Tablet-Geräten (der extra kleine bis kleine Bereich) gestapelt beginnt, bevor es auf Desktop-Geräten (mittelgroß) horizontal wird. Platzieren Sie Rasterspalten in beliebigen .row.

.col-md-1

.col-md-8

.col-md-4

.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: Flüssigkeitsbehälter

Verwandeln Sie jedes Rasterlayout mit fester Breite in ein Layout mit voller Breite, indem Sie Ihr äußerstes .containerzu ändern .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Beispiel: Mobil und Desktop

Sie möchten Ihre Säulen nicht einfach in kleinere Geräte stapeln? Verwenden Sie die extra kleinen und mittleren Geräterasterklassen, indem Sie sie .col-xs-* .col-md-*zu Ihren Spalten hinzufügen. Sehen Sie sich das Beispiel unten an, um eine bessere Vorstellung davon zu bekommen, wie alles funktioniert.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<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>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<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>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Beispiel: Handy, Tablet, Desktop

Bauen Sie auf dem vorherigen Beispiel auf, indem Sie mit Tablet- .col-sm-*Klassen noch dynamischere und leistungsfähigere Layouts erstellen.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-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: clear the XS cols if their content doesn't match in height -->
  <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

Wenn mehr als 12 Spalten in einer einzelnen Zeile platziert werden, wird jede Gruppe zusätzlicher Spalten als eine Einheit in eine neue Zeile umbrochen.

.col-xs-9

.col-xs-4
Da 9 + 4 = 13 > 12, wird dieses 4 Spalten breite div als zusammenhängende Einheit in eine neue Zeile eingefügt.

.col-xs-6
Nachfolgende Spalten werden entlang der neuen Zeile fortgesetzt.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Responsive Spalte wird zurückgesetzt

Mit den vier verfügbaren Gitterebenen werden Sie zwangsläufig auf Probleme stoßen, bei denen Ihre Spalten an bestimmten Haltepunkten nicht ganz richtig gelöscht werden, da eine höher als die andere ist. Um dies zu beheben, verwenden Sie eine Kombination aus a .clearfixund unseren responsiven Hilfsklassen .

.col-xs-6 .col-sm-3
Ändern Sie die Größe Ihres Ansichtsfensters oder sehen Sie es sich auf Ihrem Telefon an, um ein Beispiel zu erhalten.

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

  <!-- Add the extra clearfix for only the required viewport -->
  <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>

Zusätzlich zum Löschen von Spalten an reaktionsfähigen Breakpoints müssen Sie möglicherweise Offsets, Pushs oder Pulls zurücksetzen . Sehen Sie dies im Rasterbeispiel in Aktion .

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

Dachrinnen entfernen

Entfernen Sie die Dachrinnen aus einer Reihe und ihren Spalten mit der .row-no-guttersKlasse.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

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

Spalten mithilfe von .col-md-offset-*Klassen nach rechts verschieben. Diese Klassen vergrößern den linken Rand einer Spalte spaltenweise *. .col-md-offset-4Bewegt sich beispielsweise .col-md-4über vier Spalten.

.col-md-4

.col-md-4 .col-md-offset-4

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

Sie können auch Offsets von niedrigeren Grid-Ebenen mit .col-*-offset-0Klassen ü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 Ihren Inhalt mit dem Standardraster zu verschachteln, fügen Sie eine neue Spalte .rowund eine Reihe von .col-sm-*Spalten innerhalb einer vorhandenen .col-sm-*Spalte hinzu. Verschachtelte Zeilen sollten eine Reihe von Spalten enthalten, die zusammen maximal 12 ergeben (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden).

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">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Spaltenreihenfolge

Ändern Sie einfach die Reihenfolge unserer integrierten Rasterspalten mit .col-md-push-*und .col-md-pull-*Modifikatorklassen.

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

Weniger Mixins und Variablen

Zusätzlich zu vorgefertigten Rasterklassen für schnelle Layouts enthält Bootstrap Less-Variablen und Mixins zum schnellen Generieren Ihrer eigenen einfachen, semantischen Layouts.

Variablen

Variablen bestimmen die Anzahl der Spalten, die Bundstegbreite und den Medienabfragepunkt, an dem schwebende Spalten beginnen sollen. Wir verwenden diese, um die oben dokumentierten vordefinierten Grid-Klassen sowie für die unten aufgeführten benutzerdefinierten Mixins zu generieren.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins

Mixins werden in Verbindung mit den Grid-Variablen verwendet, um semantisches CSS für einzelne Grid-Spalten zu generieren.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.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));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.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));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.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));
  }
}

Beispielnutzung

Sie können die Variablen auf Ihre eigenen benutzerdefinierten Werte ändern oder einfach die Mixins mit ihren Standardwerten verwenden. Hier ist ein Beispiel für die Verwendung der Standardeinstellungen zum Erstellen eines zweispaltigen Layouts mit einer Lücke dazwischen.

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

Überschriften

Alle HTML-Überschriften <h1>bis <h6>sind verfügbar. .h1through .h6-Klassen sind ebenfalls verfügbar, wenn Sie den Schriftstil einer Überschrift anpassen möchten, aber dennoch möchten, dass Ihr Text inline angezeigt wird.

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 heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Erstellen Sie leichteren, sekundären Text in jeder Überschrift mit einem generischen <small>Tag oder der .smallKlasse.

h1. Bootstrap-Überschrift Sekundärtext

h2. Bootstrap-Überschrift Sekundärtext

h3. Bootstrap-Überschrift Sekundärtext

h4. Bootstrap-Überschrift Sekundärtext

h5. Bootstrap-Überschrift Sekundärtext

h6. Bootstrap-Überschrift Sekundärtext

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Körper Kopie

Der globale Standardwert von Bootstrap font-sizeist 14px mit einem Wert line-heightvon 1.428 . Dies gilt für den <body>und alle Absätze. Außerdem <p>erhalten (Absätze) einen unteren Rand von der Hälfte ihrer berechneten Zeilenhöhe (standardmäßig 10 Pixel).

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 bei eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Leitkörperkopie

Heben Sie einen Absatz hervor, indem Sie hinzufügen .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, ist nicht commodo luctus.

<p class="lead">...</p>

Mit weniger gebaut

Die typografische Skala basiert auf zwei Less-Variablen in variables.less : @font-size-baseund @line-height-base. Die erste ist die durchgehend verwendete Grundschriftgröße und die zweite die Grundzeilenhöhe. Wir verwenden diese Variablen und etwas einfache Mathematik, um die Ränder, Auffüllungen und Zeilenhöhen aller unserer Typen und mehr zu erstellen. Passen Sie sie an und Bootstrap passt sich an.

Inline-Textelemente

Markierter Text

Um einen Textverlauf aufgrund seiner Relevanz in einem anderen Kontext hervorzuheben, verwenden Sie das <mark>Tag.

Sie können das Markierungs-Tag verwendenMarkierenText.

You can use the mark tag to <mark>highlight</mark> text.

Text gelöscht

Um gelöschte Textblöcke anzuzeigen, verwenden Sie das <del>Tag.

~~Diese Textzeile soll als gelöschter Text behandelt werden.~~

<del>This line of text is meant to be treated as deleted text.</del>

Durchgestrichener Text

Um nicht mehr relevante Textblöcke anzuzeigen, verwenden Sie das <s>Tag.

~~Diese Textzeile soll als nicht mehr zutreffend behandelt werden.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Eingefügter Text

Um Ergänzungen zum Dokument anzuzeigen, verwenden Sie das <ins>Tag.

Diese Textzeile ist als Ergänzung zum Dokument zu behandeln.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Unterstrichener Text

<u>Verwenden Sie das Tag , um Text zu unterstreichen .

Diese Textzeile wird unterstrichen dargestellt

<u>This line of text will render as underlined</u>

Verwenden Sie die standardmäßigen Hervorhebungs-Tags von HTML mit einfachen Stilen.

Kleiner Text

Um Inline-Text oder Textblöcke weniger hervorzuheben, verwenden Sie das <small>Tag, um den Text auf 85 % der Größe des übergeordneten Elements festzulegen. font-sizeÜberschriftenelemente erhalten für verschachtelte Elemente ein eigenes <small>.

Sie können alternativ ein Inline-Element mit .smallanstelle von any verwenden <small>.

Diese Textzeile ist als Kleingedrucktes zu behandeln.

<small>This line of text is meant to be treated as fine print.</small>

Fett gedruckt

Zum Hervorheben eines Textausschnitts mit einer dickeren Schriftstärke.

Der folgende Textausschnitt wird als fetter Text dargestellt .

<strong>rendered as bold text</strong>

Kursivschrift

Zur Hervorhebung eines Textausschnitts durch Kursivschrift.

Der folgende Textausschnitt wird als kursiver Text dargestellt .

<em>rendered as italicized text</em>

Alternative Elemente

Fühlen Sie sich frei zu verwenden <b>und <i>in HTML5. <b>soll Wörter oder Phrasen hervorheben, ohne zusätzliche Bedeutung zu vermitteln, während <i>es hauptsächlich für Sprache, Fachbegriffe usw.

Ausrichtungsklassen

Richten Sie Text mit Textausrichtungsklassen einfach an Komponenten neu aus.

Linksbündiger Text.

Zentrierter Text.

Rechtsbündiger Text.

Begründeter Text.

Kein Umbruchtext.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Transformationsklassen

Wandeln Sie Text in Komponenten mit Textgroßschreibungsklassen um.

Kleingeschriebener Text.

Großgeschriebener Text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Abkürzungen

Stilisierte Implementierung des HTML- <abbr>Elements für Abkürzungen und Akronyme, um die erweiterte Version beim Hover anzuzeigen. Abkürzungen mit einem titleAttribut haben eine leicht gepunktete untere Umrandung und einen Hilfe-Cursor beim Schweben, der zusätzlichen Kontext beim Schweben und für Benutzer von Hilfstechnologien bietet.

Grundlegende Abkürzung

Eine Abkürzung des Wortes Attribut ist attr .

<abbr title="attribute">attr</abbr>

Initialismus

Fügen Sie .initialismeine Abkürzung für eine etwas kleinere Schriftgröße hinzu.

HTML ist das Beste seit geschnittenem Brot.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Adressen

Präsentieren Sie Kontaktinformationen für den nächsten Vorfahren oder das gesamte Werk. Behalten Sie die Formatierung bei, indem Sie alle Zeilen mit beenden <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Vollständiger Name
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Block Zitate

Zum Zitieren von Inhaltsblöcken aus einer anderen Quelle in Ihrem Dokument.

Standard-Blockzitat

Umschließen Sie <blockquote>beliebiges HTML als Zitat. Für direkte Zitate empfehlen wir eine <p>.

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>

Blockquote-Optionen

Stil- und Inhaltsänderungen für einfache Variationen eines Standards <blockquote>.

Eine Quelle benennen

Fügen Sie ein hinzu <footer>, um die Quelle zu identifizieren. Umschließen Sie den Namen des Quellwerks mit <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Jemand, der in Source Title berühmt ist

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alternative Anzeigen

Fügen Sie .blockquote-reversefür ein Blockzitat mit rechtsbündigem Inhalt hinzu.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Jemand, der in Source Title berühmt ist

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Listen

Ungeordnet

Eine Liste von Artikeln, bei denen die Reihenfolge keine explizite Rolle spielt.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ganzzahlige Molestie Lorem und 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>

Bestellt

Eine Liste von Elementen, bei denen die Reihenfolge ausdrücklich von Bedeutung ist.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ganzzahlige Molestie Lorem und 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>

Ungestylt

Entfernen Sie den Standard- list-styleund linken Rand von Listenelementen (nur unmittelbar untergeordnete Elemente). Dies gilt nur für unmittelbar untergeordnete Listenelemente , was bedeutet, dass Sie die Klasse auch für alle verschachtelten Listen hinzufügen müssen.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ganzzahlige Molestie Lorem und 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>

In der Reihe

Platzieren Sie alle Listenelemente in einer einzigen Zeile mit display: inline-block;und etwas leichter Polsterung.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Beschreibung

Eine Liste von Begriffen mit den zugehörigen Beschreibungen.

Beschreibungslisten: Eine Beschreibungsliste ist perfekt, um Begriffe zu definieren.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida bei eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontale Beschreibung

Erstellen Sie Begriffe und Beschreibungen <dl>nebeneinander. Beginnt gestapelt wie Standard <dl>-s, aber wenn die Navigationsleiste erweitert wird, tun dies auch diese.

Beschreibungslisten: Eine Beschreibungsliste ist perfekt, um Begriffe zu definieren.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida bei 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>

Automatisches Abschneiden

Horizontale Beschreibungslisten kürzen Begriffe, die zu lang sind, um in die linke Spalte zu passen, mit text-overflow. In schmaleren Ansichtsfenstern wechseln sie zum standardmäßigen gestapelten Layout.

In der Reihe

Umschließen Sie Inline-Codeschnipsel mit <code>.

Sollte beispielsweise <section>als Inline umbrochen werden.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Benutzereingabe

Verwenden Sie das <kbd>, um Eingaben anzuzeigen, die normalerweise über die Tastatur eingegeben werden.

Um das Verzeichnis zu wechseln, geben Sie cdgefolgt vom Namen des Verzeichnisses ein.
Um die Einstellungen zu bearbeiten, drücken Sie ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Basisblock

<pre>Für mehrere Codezeilen verwenden . Achten Sie darauf, alle spitzen Klammern im Code zu maskieren, um eine korrekte Wiedergabe zu gewährleisten.

<p>Beispieltext hier...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Sie können optional die .pre-scrollableKlasse hinzufügen, die eine maximale Höhe von 350 Pixel festlegt und eine Bildlaufleiste für die Y-Achse bereitstellt.

Variablen

Verwenden Sie zum Anzeigen von Variablen das <var>Tag.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Beispielausgabe

Verwenden Sie zum Anzeigen von Blockbeispielausgaben aus einem Programm das <samp>Tag.

Dieser Text soll als Beispielausgabe eines Computerprogramms behandelt werden.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Einfaches Beispiel

Für das grundlegende Styling – leichte Polsterung und nur horizontale Trennwände – fügen Sie die Basisklasse .tablezu jeder hinzu <table>. Es mag sehr überflüssig erscheinen, aber angesichts der weit verbreiteten Verwendung von Tabellen für andere Plugins wie Kalender und Datumsauswahl haben wir uns entschieden, unsere benutzerdefinierten Tabellenstile zu isolieren.

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

<table class="table">
  ...
</table>

Gestreifte Reihen

Verwenden .table-stripedSie diese Option, um jeder Tabellenzeile innerhalb der <tbody>.

Cross-Browser-Kompatibilität

Gestreifte Tabellen werden über den :nth-childCSS-Selektor gestaltet, der in Internet Explorer 8 nicht verfügbar ist.

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

<table class="table table-striped">
  ...
</table>

Eingefasster Tisch

Fügen Sie .table-borderedRahmen auf allen Seiten der Tabelle und der Zellen hinzu.

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

<table class="table table-bordered">
  ...
</table>

Zeilen bewegen

Hinzufügen .table-hover, um einen Hover-Status für Tabellenzeilen innerhalb einer <tbody>.

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

<table class="table table-hover">
  ...
</table>

Zusammengefasste Tabelle

Fügen Sie hinzu .table-condensed, um Tische kompakter zu machen, indem Sie die Zellpolsterung halbieren.

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

<table class="table table-condensed">
  ...
</table>

Kontextbezogener Unterricht

Verwenden Sie kontextabhängige Klassen, um Tabellenzeilen oder einzelne Zellen einzufärben.

Klasse	Beschreibung
`.active`	Wendet die Hover-Farbe auf eine bestimmte Zeile oder Zelle an
`.success`	Zeigt eine erfolgreiche oder positive Aktion an
`.info`	Zeigt eine neutrale informative Änderung oder Aktion an
`.warning`	Weist auf eine Warnung hin, die möglicherweise beachtet werden muss
`.danger`	Weist auf eine gefährliche oder potenziell negative Aktion hin

#	Spaltenüberschrift	Spaltenüberschrift	Spaltenüberschrift
1	Spalteninhalt	Spalteninhalt	Spalteninhalt
2	Spalteninhalt	Spalteninhalt	Spalteninhalt
3	Spalteninhalt	Spalteninhalt	Spalteninhalt
4	Spalteninhalt	Spalteninhalt	Spalteninhalt
5	Spalteninhalt	Spalteninhalt	Spalteninhalt
6	Spalteninhalt	Spalteninhalt	Spalteninhalt
7	Spalteninhalt	Spalteninhalt	Spalteninhalt
8	Spalteninhalt	Spalteninhalt	Spalteninhalt
9	Spalteninhalt	Spalteninhalt	Spalteninhalt

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

Bedeutung von Hilfstechnologien vermitteln

Die Verwendung von Farbe, um einer Tabellenzeile oder einer einzelnen Zelle eine Bedeutung zu verleihen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (der sichtbare Text in der entsprechenden Tabellenzeile/-zelle) oder auf alternative Weise enthalten sind, z. B. durch zusätzlichen Text, der mit der .sr-onlyKlasse verborgen ist.

Responsive Tabellen

Erstellen Sie reaktionsschnelle Tabellen, indem Sie beliebige einschließen .table, .table-responsivedamit sie auf kleinen Geräten (unter 768 Pixel) horizontal scrollen. Wenn Sie etwas mit einer Breite von mehr als 768 Pixel anzeigen, werden Sie in diesen Tabellen keinen Unterschied feststellen.

Vertikales Abschneiden/Abschneiden

Responsive Tabellen verwenden overflow-y: hidden, wodurch alle Inhalte abgeschnitten werden, die über die unteren oder oberen Ränder der Tabelle hinausgehen. Dies kann insbesondere Dropdown-Menüs und andere Widgets von Drittanbietern abschneiden.

Firefox und Fieldsets

Firefox hat ein umständliches Fieldset-Design, widthdas die responsive Tabelle stört. Dies kann nicht ohne einen Firefox-spezifischen Hack überschrieben werden, den wir in Bootstrap nicht bereitstellen:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Weitere Informationen finden Sie in dieser Stack Overflow-Antwort .

#	Tabellenüberschrift	Tabellenüberschrift	Tabellenüberschrift	Tabellenüberschrift	Tabellenüberschrift	Tabellenüberschrift
1	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle
2	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle
3	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle

#	Tabellenüberschrift	Tabellenüberschrift	Tabellenüberschrift	Tabellenüberschrift	Tabellenüberschrift	Tabellenüberschrift
1	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle
2	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle
3	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle	Tabellenzelle

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Einfaches Beispiel

Einzelne Formularsteuerelemente erhalten automatisch einen globalen Stil. Alle textuellen <input>, <textarea>und <select>Elemente mit .form-controlsind width: 100%;standardmäßig auf gesetzt. Wickeln Sie Etiketten und Bedienelemente .form-groupfür einen optimalen Abstand ein.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Mischen Sie Formgruppen nicht mit Eingabegruppen

Mischen Sie Formgruppen nicht direkt mit Eingangsgruppen . Verschachteln Sie stattdessen die Eingabegruppe innerhalb der Formulargruppe.

Inline-Formular

Fügen .form-inlineSie Ihrem Formular (das kein sein muss <form>) für linksbündige und Inline-Block-Steuerelemente hinzu. Dies gilt nur für Formulare in Ansichtsfenstern, die mindestens 768 Pixel breit sind.

Kann benutzerdefinierte Breiten erfordern

Eingaben und Auswahlen werden width: 100%;standardmäßig in Bootstrap angewendet. Innerhalb von Inline-Formularen setzen wir das zurück, width: auto;damit sich mehrere Steuerelemente in derselben Zeile befinden können. Abhängig von Ihrem Layout können zusätzliche benutzerdefinierte Breiten erforderlich sein.

Fügen Sie immer Labels hinzu

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

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Horizontale Form

Verwenden Sie die vordefinierten Rasterklassen von Bootstrap, um Beschriftungen und Gruppen von Formularsteuerelementen in einem horizontalen Layout auszurichten, indem Sie sie .form-horizontalzum Formular hinzufügen (was kein sein muss <form>). Dadurch werden s so geändert .form-group, dass sie sich wie Rasterzeilen verhalten, sodass keine Notwendigkeit für .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Unterstützte Steuerelemente

Beispiele für Standardformularsteuerelemente, die in einem Beispielformularlayout unterstützt werden.

Eingänge

Die gängigsten Formularsteuerelemente, textbasierte Eingabefelder. Beinhaltet Unterstützung für alle HTML5-Typen: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, und color.

Typdeklaration erforderlich

Eingaben werden nur dann vollständig formatiert, wenn sie typerichtig deklariert sind.

<input type="text" class="form-control" placeholder="Text input">

Eingangsgruppen

Um integrierten Text oder Schaltflächen vor und/oder nach einem textbasierten hinzuzufügen <input>, sehen Sie sich die Eingabegruppenkomponente an .

Textbereich

Formularsteuerelement, das mehrere Textzeilen unterstützt. Ändern Sie rowsdas Attribut nach Bedarf.

<textarea class="form-control" rows="3"></textarea>

Kontrollkästchen und Radios

Kontrollkästchen dienen zum Auswählen einer oder mehrerer Optionen in einer Liste, während Radios zum Auswählen einer Option aus vielen dienen.

Deaktivierte Kontrollkästchen und Optionsfelder werden unterstützt, aber um einen "nicht zulässigen" Cursor beim Bewegen des Mauszeigers auf das übergeordnete Element bereitzustellen , müssen Sie die Klasse dem übergeordneten Element , , , oder <label>hinzufügen ..disabled.radio.radio-inline.checkbox.checkbox-inline

Standard (gestapelt)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Inline-Kontrollkästchen und Radios

Verwenden Sie die Klassen .checkbox-inlineoder .radio-inlinefür eine Reihe von Kontrollkästchen oder Optionsfeldern für Steuerelemente, die in derselben Zeile erscheinen.

<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="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Kontrollkästchen und Radios ohne Beschriftungstext

Sollten Sie keinen Text innerhalb von haben <label>, wird die Eingabe so positioniert, wie Sie es erwarten würden. Funktioniert derzeit nur bei nicht-inline Checkboxen und Radios. Denken Sie daran, immer noch eine Art Bezeichnung für Hilfstechnologien bereitzustellen (z. B. mit aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Wählt aus

Beachten Sie, dass viele native Auswahlmenüs – insbesondere in Safari und Chrome – abgerundete Ecken haben, die nicht über border-radiusEigenschaften geändert werden können.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Für <select>Steuerelemente mit dem multipleAttribut 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>

Statische Kontrolle

Wenn Sie einfachen Text neben einer Formularbezeichnung innerhalb eines Formulars platzieren müssen, verwenden Sie die .form-control-staticKlasse in einer <p>.

<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 protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Fokuszustand

Wir entfernen die Standardstile outlinefür einige Formularsteuerelemente und wenden box-shadowan ihrer Stelle ein für an :focus.

Demo `:focus`-Zustand

Die obige Beispieleingabe verwendet benutzerdefinierte Stile in unserer Dokumentation, um den :focusStatus einer .form-control.

Deaktivierter Zustand

Fügen Sie das disabledboolesche Attribut zu einer Eingabe hinzu, um Benutzerinteraktionen zu verhindern. Deaktivierte Eingaben erscheinen heller und fügen einen not-allowedCursor hinzu.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Deaktivierte Feldsätze

Fügen Sie das disabledAttribut zu a <fieldset>hinzu, um alle Steuerelemente innerhalb von gleichzeitig zu deaktivieren <fieldset>.

Vorbehalt bezüglich der Link-Funktionalität von`<a>`

Standardmäßig behandeln Browser alle nativen Formularsteuerelemente ( <input>, <select>und <button>-Elemente) innerhalb von <fieldset disabled>als deaktiviert, wodurch sowohl Tastatur- als auch Mausinteraktionen auf ihnen verhindert werden. Wenn Ihr Formular jedoch auch <a ... class="btn btn-*">Elemente enthält, erhalten diese nur den Stil pointer-events: none. Wie im Abschnitt über den deaktivierten Zustand für Schaltflächen (und insbesondere im Unterabschnitt für Ankerelemente) erwähnt, ist diese CSS-Eigenschaft noch nicht standardisiert und wird in Opera 18 und darunter oder in Internet Explorer 11 nicht vollständig unterstützt und hat gewonnen hindert Tastaturbenutzer nicht daran, diese Links zu fokussieren oder zu aktivieren. Verwenden Sie also sicherheitshalber benutzerdefiniertes JavaScript, um solche Links zu deaktivieren.

Cross-Browser-Kompatibilität

Während Bootstrap diese Stile in allen Browsern anwendet, unterstützen Internet Explorer 11 und darunter das disabledAttribut auf einer <fieldset>. Verwenden Sie benutzerdefiniertes JavaScript, um das Feldset in diesen Browsern zu deaktivieren.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Schreibgeschützter Zustand

Fügen Sie das readonlyboolesche Attribut zu einer Eingabe hinzu, um eine Änderung des Eingabewerts zu verhindern. Schreibgeschützte Eingaben erscheinen heller (genau wie deaktivierte Eingaben), behalten aber den Standard-Cursor bei.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Hilfstext

Hilfetext auf Blockebene für Formularsteuerelemente.

Zuordnen von Hilfetext zu Formularsteuerelementen

Hilfetext sollte explizit mit dem Formularsteuerelement verknüpft werden, auf das er sich bezieht, indem das aria-describedbyAttribut verwendet wird. Dadurch wird sichergestellt, dass Hilfstechnologien – wie Bildschirmlesegeräte – diesen Hilfetext ansagen, wenn der Benutzer fokussiert oder das Steuerelement eingibt.

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Validierungszustände

Bootstrap enthält Validierungsstile für Fehler-, Warnungs- und Erfolgszustände in Formularsteuerelementen. Um es zu verwenden, fügen Sie .has-warning, .has-erroroder .has-successzum übergeordneten Element hinzu. Alle .control-label, .form-controlund .help-blockinnerhalb dieses Elements erhalten die Validierungsstile.

Übermittlung des Validierungsstatus an Hilfstechnologien und farbenblinde Benutzer

Die Verwendung dieser Validierungsstile zur Angabe des Status eines Formularsteuerelements bietet nur eine visuelle, farbbasierte Anzeige, die Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – oder farbenblinden Benutzern nicht vermittelt wird.

Stellen Sie sicher, dass auch eine alternative Statusanzeige bereitgestellt wird. Beispielsweise können Sie einen Hinweis auf den Zustand in den <label>Text des Formularsteuerelements selbst einfügen (wie im folgenden Codebeispiel), ein Glyphicon (mit entsprechendem alternativen Text unter Verwendung der .sr-onlyKlasse – siehe die Glyphicon-Beispiele ) oder durch Bereitstellung einer zusätzlicher Hilfetextblock . Speziell für Hilfstechnologien kann auch ungültigen Formularsteuerelementen ein aria-invalid="true"Attribut zugewiesen werden.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Mit optionalen Symbolen

Sie können auch optionale Feedback-Symbole hinzufügen, indem Sie .has-feedbackund das rechte Symbol hinzufügen.

Feedback-Symbole funktionieren nur mit <input class="form-control">Textelementen.

Symbole, Beschriftungen und Eingabegruppen

Bei Eingängen ohne Beschriftung und bei Eingangsgruppen mit Add-On rechts ist eine manuelle Positionierung der Feedback-Icons erforderlich . Aus Gründen der Barrierefreiheit wird dringend empfohlen, Beschriftungen für alle Eingaben bereitzustellen. Wenn Sie verhindern möchten, dass Beschriftungen angezeigt werden, blenden Sie sie mit der .sr-onlyKlasse aus. Wenn Sie auf Beschriftungen verzichten müssen, passen Sie den topWert des Feedback-Icons an. Passen Sie für Eingabegruppen den rightWert auf einen geeigneten Pixelwert an, abhängig von der Breite Ihres Addons.

Übertragung der Bedeutung des Symbols auf unterstützende Technologien

Um sicherzustellen, dass Hilfstechnologien – wie z. B. Bildschirmleseprogramme – die Bedeutung eines Symbols korrekt wiedergeben, sollte zusätzlicher verborgener Text in die .sr-onlyKlasse aufgenommen und explizit mit dem Formularsteuerelement verknüpft werden, auf das es sich bezieht, indem verwendet wird aria-describedby. Stellen Sie alternativ sicher, dass die Bedeutung (z. B. die Tatsache, dass eine Warnung für ein bestimmtes Texteingabefeld vorhanden ist) in einer anderen Form übermittelt wird, z. B. indem Sie den Text des <label>mit dem Formularsteuerelement verknüpften Elements ändern.

Obwohl die folgenden Beispiele den Validierungsstatus ihrer jeweiligen Formularsteuerelemente bereits im <label>Text selbst erwähnen, wurde die obige Technik (unter Verwendung von .sr-onlytext und aria-describedby) zu Veranschaulichungszwecken aufgenommen.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Optionale Symbole in horizontalen und Inline-Formularen

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Optionale Symbole mit versteckten `.sr-only`Beschriftungen

Wenn Sie die .sr-onlyKlasse zum Ausblenden eines Formularsteuerelements verwenden <label>(anstatt andere Beschriftungsoptionen wie das aria-labelAttribut zu verwenden), passt Bootstrap die Position des Symbols automatisch an, sobald es hinzugefügt wurde.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Dimensionierung kontrollieren

Legen Sie Höhen mit Klassen wie .input-lgfest und Breiten mit Rasterspaltenklassen wie .col-lg-*.

Höhendimensionierung

Erstellen Sie größere oder kürzere Formularsteuerelemente, die den Schaltflächengrößen entsprechen.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<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>

Gruppengrößen für horizontale Formulare

Passen Sie Etiketten und Formularsteuerelemente schnell an, .form-horizontalindem Sie .form-group-lgoder hinzufügen .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Spaltengröße

Umschließen Sie Eingaben mit Rasterspalten oder einem beliebigen benutzerdefinierten übergeordneten Element, um die gewünschten Breiten einfach durchzusetzen.

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

Button-Tags

Verwenden Sie die Schaltflächenklassen für ein <a>, <button>oder <input>-Element.

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

Kontextspezifische Verwendung

Während Schaltflächenklassen für <a>und <button>Elemente verwendet werden können, werden nur <button>Elemente in unseren Navigations- und Navigationsleistenkomponenten unterstützt.

Links, die als Schaltflächen fungieren

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

Cross-Browser-Rendering

Als Best Practice empfehlen wir dringend, das <button>Element wann immer möglich zu verwenden zu verwenden, um ein übereinstimmendes browserübergreifendes Rendering sicherzustellen.

Unter anderem gibt es einen Fehler in Firefox <30 , der uns daran hindert, die line-heightvon <input>-basierten Schaltflächen zu setzen, was dazu führt, dass sie nicht genau der Höhe anderer Schaltflächen in Firefox entsprechen.

Optionen

Verwenden Sie eine der verfügbaren Schaltflächenklassen, um schnell eine gestaltete Schaltfläche zu erstellen.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Bedeutung von Hilfstechnologien vermitteln

Die Verwendung von Farbe, um einer Schaltfläche eine Bedeutung zu verleihen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst (dem sichtbaren Text der Schaltfläche) ersichtlich sind oder durch alternative Mittel, wie z. B. zusätzlichen Text, der mit der .sr-onlyKlasse ausgeblendet wird, enthalten sind.

Größen

Lust auf größere oder kleinere Buttons? Fügen Sie .btn-lg, .btn-sm, oder .btn-xsfür weitere Größen hinzu.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Erstellen Sie Schaltflächen auf Blockebene – solche, die sich über die gesamte Breite eines übergeordneten Elements erstrecken – durch Hinzufügen von .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Aktiver Zustand

Schaltflächen erscheinen gedrückt (mit einem dunkleren Hintergrund, einem dunkleren Rahmen und einem Schatten), wenn sie aktiv sind. Bei <button>Elementen erfolgt dies über :active. Für <a>Elemente ist es mit erledigt .active. Sie können jedoch .activeon <button>s verwenden (und das aria-pressed="true"Attribut einschließen), falls Sie den aktiven Zustand programmgesteuert replizieren müssen.

Button-Element

Da es sich um eine Pseudo-Klasse handelt, müssen Sie sie nicht hinzufügen :active, aber wenn Sie dasselbe Erscheinungsbild erzwingen müssen, fahren Sie fort und fügen Sie hinzu .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Ankerelement

Fügen Sie die .activeKlasse zu <a>Schaltflächen hinzu.

Primärer Link Verknüpfung

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Deaktivierter Zustand

Machen Sie Schaltflächen unanklickbar, indem Sie sie mit zurückblenden opacity.

Button-Element

Fügen Sie das disabledAttribut zu <button>Schaltflächen hinzu.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Cross-Browser-Kompatibilität

Wenn Sie das disabledAttribut zu einem hinzufügen <button>, wird Text in Internet Explorer 9 und darunter grau mit einem hässlichen Textschatten dargestellt, den wir nicht beheben können.

Ankerelement

Fügen Sie die .disabledKlasse zu <a>Schaltflächen hinzu.

Primärer Link Verknüpfung

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Wir verwenden .disabledhier als Utility-Klasse, ähnlich der allgemeinen .activeKlasse, daher ist kein Präfix erforderlich.

Einschränkung der Link-Funktionalität

Diese Klasse verwendet pointer-events: none, um zu versuchen, die Link-Funktionalität von <a>s zu deaktivieren, aber diese CSS-Eigenschaft ist noch nicht standardisiert und wird in Opera 18 und darunter oder in Internet Explorer 11 nicht vollständig unterstützt. Darüber hinaus sogar in Browsern, die pointer-events: none, keyboard die Navigation bleibt unberührt, was bedeutet, dass sehende Tastaturbenutzer und Benutzer von Hilfstechnologien diese Links weiterhin aktivieren können. Verwenden Sie also sicherheitshalber benutzerdefiniertes JavaScript, um solche Links zu deaktivieren.

Ansprechende Bilder

Bilder in Bootstrap 3 können über das Hinzufügen der .img-responsiveKlasse reaktionsfreundlich gemacht werden. Dies gilt für max-width: 100%;, height: auto;und display: block;für das Bild, sodass es sich gut an das übergeordnete Element anpasst.

Um Bilder zu zentrieren, die die .img-responsiveKlasse verwenden, verwenden Sie .center-blockanstelle von .text-center. Weitere Informationen zur Verwendung finden Sie im Abschnitt.center-block Hilfsklassen.

SVG-Bilder und IE 8-10

In Internet Explorer 8-10 haben SVG-Bilder .img-responsiveeine unverhältnismäßig große Größe. Um dies zu beheben, fügen Sie width: 100% \9;bei Bedarf hinzu. Bootstrap wendet dies nicht automatisch an, da es zu Komplikationen bei anderen Bildformaten führt.

<img src="..." class="img-responsive" alt="Responsive image">

Bildformen

Fügen Sie einem Element Klassen hinzu, <img>um Bilder in jedem Projekt einfach zu gestalten.

Cross-Browser-Kompatibilität

Beachten Sie, dass Internet Explorer 8 abgerundete Ecken nicht unterstützt.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Kontextuelle Farben

Vermitteln Sie Bedeutung durch Farbe mit einer Handvoll Schwerpunktnutzenklassen. Diese können auch auf Links angewendet werden und werden beim Hovern dunkler, genau wie unsere Standard-Link-Stile.

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>

Umgang mit Besonderheiten

Manchmal können Hervorhebungsklassen aufgrund der Besonderheiten eines anderen Selektors nicht angewendet werden. In den meisten Fällen besteht eine ausreichende Problemumgehung darin, Ihren Text in eine <span>mit der Klasse einzuschließen.

Bedeutung von Hilfstechnologien vermitteln

Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (die kontextbezogenen Farben werden nur verwendet, um die Bedeutung zu verstärken, die bereits im Text/Markup vorhanden ist) oder durch alternative Mittel, wie .sr-onlyz .

Kontextuelle Hintergründe

Ähnlich wie bei den kontextbezogenen Textfarbklassen können Sie den Hintergrund eines Elements ganz einfach auf eine beliebige kontextbezogene Klasse festlegen. Ankerkomponenten werden beim Hover dunkler, genau wie die Textklassen.

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 Besonderheiten

Manchmal können kontextbezogene Hintergrundklassen aufgrund der Besonderheit eines anderen Selektors nicht angewendet werden. In einigen Fällen besteht eine ausreichende Problemumgehung darin, den Inhalt Ihres Elements in ein <div>mit der Klasse einzuschließen.

Bedeutung von Hilfstechnologien vermitteln

Stellen Sie wie bei Kontextfarben sicher, dass jede Bedeutung, die durch Farbe vermittelt wird, auch in einem Format vermittelt wird, das nicht nur der Präsentation dient.

Schließen-Symbol

Verwenden Sie das generische Schließen-Symbol, um Inhalte wie Modale und Warnungen zu verwerfen.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

Verwenden Sie Carets, um die Dropdown-Funktionalität und -Richtung anzugeben. Beachten Sie, dass das standardmäßige Caretzeichen in Dropdown-Menüs automatisch umgekehrt wird .

<span class="caret"></span>

Schnelle Schwimmer

Lassen Sie ein Element mit einer Klasse nach links oder rechts schweben. !importantist enthalten, um Spezifitätsprobleme zu vermeiden. Klassen können auch als Mixins verwendet werden.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Inhaltsblöcke zentrieren

Setzen Sie ein Element auf display: blockund zentrieren Sie es über margin. Verfügbar als Mixin und Klasse.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Klarfix

Einfaches Löschen floatvon s durch Hinzufügen .clearfix zum übergeordneten Element . Verwendet das von Nicolas Gallagher populär gemachte Mikro-Clearfix . Kann auch als Mixin verwendet werden.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Inhalte ein- und ausblenden

Erzwinge das Ein- oder Ausblenden eines Elements ( auch für Screenreader ) mit der Verwendung von .showund - .hiddenKlassen. Diese Klassen werden verwendet !important, um Spezifitätskonflikte zu vermeiden, genau wie die Quick Floats . Sie sind nur für das Umschalten auf Blockebene verfügbar. Sie können auch als Mixins verwendet werden.

.hideist verfügbar, wirkt sich jedoch nicht immer auf Screenreader aus und ist seit v3.0.1 veraltet . Verwenden Sie stattdessen .hiddenoder ..sr-only

Darüber hinaus .invisiblekann verwendet werden, um nur die Sichtbarkeit eines Elements umzuschalten, was bedeutet, dass displayes nicht geändert wird und das Element immer noch den Fluss des Dokuments beeinflussen kann.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Screenreader- und Tastaturnavigationsinhalt

Blenden Sie ein Element für alle Geräte außer Screenreadern mit aus .sr-only. Kombinieren Sie .sr-onlymit .sr-only-focusable, um das Element erneut anzuzeigen, wenn es fokussiert ist (z. B. durch einen Nur-Tastatur-Benutzer). Erforderlich, um Best Practices für Barrierefreiheit zu befolgen . Kann auch als Mixin verwendet werden.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Bildersatz

Verwenden Sie die .text-hideKlasse oder das Mixin, um den Textinhalt eines Elements durch ein Hintergrundbild zu ersetzen.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Verwenden Sie für eine schnellere mobilfreundliche Entwicklung diese Hilfsklassen zum Ein- und Ausblenden von Inhalten nach Gerät per Medienabfrage. Ebenfalls enthalten sind Hilfsklassen zum Umschalten des Inhalts beim Drucken.

Versuchen Sie, diese nur begrenzt zu verwenden, und vermeiden Sie es, völlig unterschiedliche Versionen derselben Website zu erstellen. Verwenden Sie sie stattdessen, um die Präsentation jedes Geräts zu ergänzen.

Verfügbare Klassen

Verwenden Sie eine einzelne oder eine Kombination der verfügbaren Klassen zum Umschalten von Inhalten über Ansichtsfenster-Haltepunkte hinweg.

	Extra kleine GeräteTelefone (<768px)	Kleine GeräteTablets (≥768px)	Mittlere GeräteDesktops (≥992px)	Große GeräteDesktops (≥1200px)
`.visible-xs-*`	Sichtbar	Versteckt	Versteckt	Versteckt
`.visible-sm-*`	Versteckt	Sichtbar	Versteckt	Versteckt
`.visible-md-*`	Versteckt	Versteckt	Sichtbar	Versteckt
`.visible-lg-*`	Versteckt	Versteckt	Versteckt	Sichtbar
`.hidden-xs`	Versteckt	Sichtbar	Sichtbar	Sichtbar
`.hidden-sm`	Sichtbar	Versteckt	Sichtbar	Sichtbar
`.hidden-md`	Sichtbar	Sichtbar	Versteckt	Sichtbar
`.hidden-lg`	Sichtbar	Sichtbar	Sichtbar	Versteckt

Ab v3.2.0 gibt es die .visible-*-*Klassen für jeden Haltepunkt in drei Variationen, eine für jeden displayunten aufgeführten CSS-Eigenschaftswert.

Gruppe von Klassen	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Für extra kleine ( xs) Bildschirme sind die verfügbaren .visible-*-*Klassen beispielsweise: .visible-xs-block, .visible-xs-inline, und .visible-xs-inline-block.

Die Klassen .visible-xs, .visible-sm, .visible-mdund .visible-lgsind ebenfalls vorhanden, aber ab v3.2.0 veraltet . Sie sind ungefähr äquivalent zu .visible-*-block, abgesehen von zusätzlichen Sonderfällen für das Umschalten von <table>-bezogenen Elementen.

Klassen drucken

Verwenden Sie diese ähnlich wie bei den regulären Responsive-Klassen zum Umschalten von Inhalten für den Druck.

Klassen	Browser	Drucken
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Versteckt	Sichtbar
`.hidden-print`	Sichtbar	Versteckt

Die Klasse .visible-printexistiert auch, ist aber ab v3.2.0 veraltet . Es ist ungefähr äquivalent zu .visible-print-block, außer mit zusätzlichen Sonderfällen für <table>-bezogene Elemente.

Testfälle

Ändern Sie die Größe Ihres Browsers oder laden Sie ihn auf verschiedene Geräte, um die reaktionsschnellen Hilfsklassen zu testen.

Sichtbar auf...

Grüne Häkchen zeigen an, dass das Element in Ihrem aktuellen Ansichtsfenster sichtbar ist .

Extra klein ✔ Sichtbar auf X-Small

Klein ✔ Sichtbar auf klein

Mittel ✔ Auf Medium sichtbar

Groß ✔ Groß sichtbar

Extra klein und klein ✔ Sichtbar auf x-klein und klein

Mittel und groß ✔ Sichtbar auf mittel und groß

Extra klein und mittel ✔ Sichtbar auf x-klein und mittel

Klein und groß ✔ Sichtbar auf klein und groß

Extra klein und groß ✔ Sichtbar auf x-klein und groß

Klein und mittel ✔ Sichtbar auf klein und mittel

Versteckt auf ...

Hier zeigen grüne Häkchen auch an, dass das Element in Ihrem aktuellen Ansichtsfenster ausgeblendet ist .

Extra klein ✔ Versteckt auf x-small

Klein ✔ Versteckt auf klein

Mittel ✔ Versteckt auf Medium

Groß ✔ Versteckt auf groß

Extra klein und klein ✔ Versteckt auf x-klein und klein

Mittel und groß ✔ Versteckt auf mittel und groß

Extra klein und mittel ✔ Versteckt auf x-klein und mittel

Klein und groß ✔ Versteckt auf klein und groß

Extra klein und groß ✔ Versteckt auf x-klein und groß

Klein und mittel ✔ Versteckt auf klein und mittel

Das CSS von Bootstrap basiert auf Less, einem Präprozessor mit zusätzlichen Funktionen wie Variablen, Mixins und Funktionen zum Kompilieren von CSS. Diejenigen, die die Less-Quelldateien anstelle unserer kompilierten CSS-Dateien verwenden möchten, können die zahlreichen Variablen und Mixins nutzen, die wir im gesamten Framework verwenden.

Grid-Variablen und Mixins werden im Abschnitt Grid-System behandelt .

Bootstrap kompilieren

Bootstrap kann auf mindestens zwei Arten verwendet werden: mit dem kompilierten CSS oder mit den Less-Quelldateien. Um die Less-Dateien zu kompilieren, konsultieren Sie den Abschnitt „Erste Schritte“ , um zu erfahren, wie Sie Ihre Entwicklungsumgebung einrichten, um die erforderlichen Befehle auszuführen.

Kompilierungstools von Drittanbietern funktionieren möglicherweise mit Bootstrap, werden jedoch nicht von unserem Kernteam unterstützt.

Variablen

Variablen werden im gesamten Projekt verwendet, um häufig verwendete Werte wie Farben, Abstände oder Schriftstapel zu zentralisieren und gemeinsam zu nutzen. Eine vollständige Aufschlüsselung finden Sie im Customizer .

Farben

Nutzen Sie ganz einfach zwei Farbschemata: Graustufen und Semantik. Graustufenfarben bieten schnellen Zugriff auf häufig verwendete Schwarztöne, während die Semantik verschiedene Farben umfasst, die sinnvollen kontextuellen Werten zugeordnet sind.

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

Verwenden Sie diese Farbvariablen unverändert oder weisen Sie sie sinnvolleren Variablen für Ihr Projekt zu.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Gerüst

Eine Handvoll Variablen zum schnellen Anpassen von Schlüsselelementen des Grundgerüsts Ihrer Website.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Verknüpfungen

Gestalten Sie Ihre Links ganz einfach mit der richtigen Farbe mit nur einem Wert.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Beachten Sie, dass das @link-hover-coloreine Funktion verwendet, ein weiteres großartiges Tool von Less, um automatisch die richtige Hover-Farbe zu erstellen. Sie können darken, lighten, saturateund verwenden desaturate.

Typografie

Legen Sie mit ein paar schnellen Variablen ganz einfach Schriftart, Textgröße, Zeilenabstand und mehr fest. Bootstrap nutzt 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;

Symbole

Zwei schnelle Variablen zum Anpassen des Speicherorts und Dateinamens Ihrer Symbole.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Komponenten

Komponenten in Bootstrap verwenden einige Standardvariablen zum Festlegen gemeinsamer Werte. Hier sind die am häufigsten verwendeten.

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

Anbieter-Mixins

Anbieter-Mixins sind Mixins zur Unterstützung mehrerer Browser, indem alle relevanten Anbieterpräfixe in Ihr kompiliertes CSS aufgenommen werden.

Box-Größe

Setzen Sie das Box-Modell Ihrer Komponenten mit einem einzigen Mixin zurück. Den Kontext finden Sie in diesem hilfreichen Artikel von Mozilla .

Das Mixin ist ab v3.2.0 mit der Einführung von Autoprefixer veraltet. Um die Abwärtskompatibilität zu wahren, wird Bootstrap das Mixin weiterhin intern verwenden, bis Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Abgerundete Ecken

Heutzutage unterstützen alle modernen Browser die border-radiusEigenschaft ohne Präfix. Daher gibt es kein .border-radius()Mixin, aber Bootstrap enthält Verknüpfungen zum schnellen Abrunden von zwei Ecken auf einer bestimmten Seite eines Objekts.

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

Kastenschatten (Schlagschatten).

Wenn Ihre Zielgruppe die neuesten und besten Browser und Geräte verwendet, stellen Sie sicher, dass Sie die box-shadowEigenschaft nur für sich verwenden. Wenn Sie Unterstützung für ältere Android- (vor v4) und iOS-Geräte (vor iOS 5) benötigen, verwenden Sie das veraltete Mixin, um das erforderliche -webkitPräfix abzurufen.

Das Mixin ist ab v3.1.0 veraltet , da Bootstrap die veralteten Plattformen, die die Standardeigenschaft nicht unterstützen, nicht offiziell unterstützt. Um die Abwärtskompatibilität zu wahren, wird Bootstrap das Mixin weiterhin intern verwenden, bis Bootstrap v4.

Achten Sie darauf, rgba()Farben in Ihren Box-Schatten zu verwenden, damit sie sich so nahtlos wie möglich in den Hintergrund einfügen.

.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. Legen Sie alle Übergangsinformationen mit einem fest oder geben Sie bei Bedarf eine separate Verzögerung und Dauer an.

Die Mixins sind ab v3.2.0 mit der Einführung von Autoprefixer veraltet. Um die Abwärtskompatibilität zu wahren, verwendet Bootstrap die Mixins weiterhin intern bis Bootstrap v4.

.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

Drehen, skalieren, übersetzen (verschieben) oder neigen Sie beliebige Objekte.

Die Mixins sind ab v3.2.0 mit der Einführung von Autoprefixer veraltet. Um die Abw��rtskompatibilität zu wahren, verwendet Bootstrap die Mixins weiterhin intern bis Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See 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); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          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; // IE9 only
          transform-origin: @origin;
}

Animationen

Ein einzelnes Mixin zur Verwendung aller Animationseigenschaften von CSS3 in einer Deklaration und andere Mixins für einzelne Eigenschaften.

Die Mixins sind ab v3.2.0 mit der Einführung von Autoprefixer veraltet. Um die Abwärtskompatibilität zu wahren, verwendet Bootstrap die Mixins weiterhin intern bis Bootstrap v4.

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

Opazität

Legen Sie die Deckkraft für alle Browser fest und stellen Sie einen filterFallback für IE8 bereit.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Platzhaltertext

Stellen Sie Kontext für Formularsteuerelemente in jedem Feld bereit.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Säulen

Generieren Sie Spalten über CSS innerhalb eines einzelnen Elements.

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

Farbverläufe

Verwandeln Sie zwei beliebige Farben ganz einfach in einen Hintergrundverlauf. Werden Sie fortgeschrittener und legen Sie eine Richtung fest, verwenden Sie drei Farben oder einen radialen Farbverlauf. Mit einem einzigen Mixin erhalten Sie alle präfixierten Syntaxen, die Sie benötigen.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Sie können auch den Winkel eines zweifarbigen, linearen Standardverlaufs angeben:

#gradient > .directional(#333; #000; 45deg);

Wenn Sie einen Farbverlauf im Friseurstreifenstil benötigen, ist das auch einfach. Geben Sie einfach eine einzelne Farbe an und wir legen einen durchscheinenden weißen Streifen darüber.

#gradient > .striped(#333; 45deg);

Erhöhen Sie den Einsatz und verwenden Sie stattdessen drei Farben. Legen Sie 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);

Kopf hoch! Sollten Sie jemals einen Farbverlauf entfernen müssen, achten Sie darauf, alle IE-spezifischen filter, die Sie möglicherweise hinzugefügt haben, zu entfernen. Sie können dies tun, indem Sie das .reset-filter()Mixin neben verwenden background-image: none;.

Utility-Mixins

Utility-Mixins sind Mixins, die ansonsten nicht zusammenhängende CSS-Eigenschaften kombinieren, um ein bestimmtes Ziel oder eine bestimmte Aufgabe zu erreichen.

Klarfix

Vergessen Sie das Hinzufügen class="clearfix"zu irgendeinem Element und fügen Sie stattdessen das .clearfix()Mixin hinzu, wo es angebracht ist. Verwendet das Mikro-Clearfix von Nicolas Gallagher .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Horizontale Zentrierung

Zentrieren Sie schnell jedes Element innerhalb seines übergeordneten Elements. Erfordert widthoder max-widthmuss festgelegt werden.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Größenhelfer

Legen Sie die Abmessungen eines Objekts einfacher fest.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Anpassbare Textbereiche

Konfigurieren Sie einfach die Optionen zur Größenänderung für jeden Textbereich oder jedes andere Element. Standardmäßig normales Browserverhalten ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Abschneiden von Text

Kürzen Sie Text einfach mit Auslassungspunkten mit einem einzigen Mixin. Element muss blockoder inline-blockEbene sein.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Bilder der Netzhaut

Geben Sie zwei Bildpfade und die @1x-Bildabmessungen an, und Bootstrap stellt eine @2x-Medienabfrage bereit. Wenn Sie viele Bilder bereitzustellen haben, sollten Sie erwägen, Ihr Retina-Bild-CSS manuell in einer einzigen Medienabfrage 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;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Während Bootstrap auf Less basiert, hat es auch einen offiziellen Sass-Port . Wir pflegen es in einem separaten GitHub-Repository und behandeln Updates mit einem Konvertierungsskript.

Was ist inbegriffen

Da der Sass-Port ein separates Repo hat und ein etwas anderes Publikum bedient, unterscheiden sich die Inhalte des Projekts stark vom Bootstrap-Hauptprojekt. Dadurch wird sichergestellt, dass der Sass-Port mit so vielen Sass-basierten Systemen wie möglich kompatibel ist.

Weg	Beschreibung
`lib/`	Ruby-Gem-Code (Sass-Konfiguration, Rails- und Compass-Integrationen)
`tasks/`	Konverterskripte (Upstream Less zu Sass umwandeln)
`test/`	Zusammenstellungstests
`templates/`	Compass-Paketmanifest
`vendor/assets/`	Sass-, JavaScript- und Schriftartdateien
`Rakefile`	Interne Aufgaben wie Rake und Convert

Besuchen Sie das GitHub-Repository des Sass-Ports , um diese Dateien in Aktion zu sehen.

Installation

Informationen zur Installation und Verwendung von Bootstrap für Sass finden Sie in der Readme-Datei des GitHub-Repositorys . Es ist die aktuellste Quelle und enthält Informationen zur Verwendung mit Rails-, Compass- und Standard-Sass-Projekten.

Bootstrap für Sass

CSS

Überblick

HTML5-Dokumenttyp

Zuerst mobil

Typografie und Links

Normalisieren.css

Behälter

Grid-System

Einführung

Medien-Anfragen

Rasteroptionen

Beispiel: Gestapelt bis horizontal

Beispiel: Flüssigkeitsbehälter

Beispiel: Mobil und Desktop

Beispiel: Handy, Tablet, Desktop

Beispiel: Spaltenumbruch

Responsive Spalte wird zurückgesetzt

Dachrinnen entfernen

Spalten versetzen

Spalten verschachteln

Spaltenreihenfolge

Weniger Mixins und Variablen

Variablen

Mixins

Beispielnutzung

Typografie

Überschriften

h1. Bootstrap-Überschrift

h2. Bootstrap-Überschrift

h3. Bootstrap-Überschrift

h4. Bootstrap-Überschrift

h5. Bootstrap-Überschrift

h6. Bootstrap-Überschrift

h1. Bootstrap-Überschrift Sekundärtext

h2. Bootstrap-Überschrift Sekundärtext

h3. Bootstrap-Überschrift Sekundärtext

h4. Bootstrap-Überschrift Sekundärtext

h5. Bootstrap-Überschrift Sekundärtext

h6. Bootstrap-Überschrift Sekundärtext

Körper Kopie

Leitkörperkopie

Mit weniger gebaut

Inline-Textelemente

Markierter Text

Text gelöscht

Durchgestrichener Text

Eingefügter Text

Unterstrichener Text

Kleiner Text

Fett gedruckt

Kursivschrift

Alternative Elemente

Ausrichtungsklassen

Transformationsklassen

Abkürzungen

Grundlegende Abkürzung

Initialismus

Adressen

Block Zitate

Standard-Blockzitat

Blockquote-Optionen

Eine Quelle benennen

Alternative Anzeigen

Listen

Ungeordnet

Bestellt

Ungestylt

In der Reihe

Beschreibung

Horizontale Beschreibung

Automatisches Abschneiden

Code

In der Reihe

Benutzereingabe

Basisblock

Variablen

Beispielausgabe

Tische

Einfaches Beispiel

Gestreifte Reihen

Demo `:focus`-Zustand

Vorbehalt bezüglich der Link-Funktionalität von`<a>`

Optionale Symbole mit versteckten `.sr-only`Beschriftungen