Überblick

HTML5-Doctype

Bootstrap benutzt bestimmte HTML-Elemente und CSS-Eigenschaften, die die Verwendung des HTML5-Doctypes erforderlich machen. Fügen Sie diese am Anfang von allen Projekten ein.

<!DOCTYPE html>
<html lang="de">
  ...
</html>

Mobile-First-Ansatz

Bootstrap ist ein Mobile-First-Projekt. Stile, die zunächst für kleine Bildschirme geschrieben wurden und sich dann den größeren anpassen, finden Sie in der gesamten Bibliothek immer wieder, anstatt in separaten Dateien. Damit Ihre Seite auf mobilen Geräten vernünftig angezeigt wird und gezoomt werden kann, ergänzen Sie das Viewport-Meta-Tag in Ihrem <head>.

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

Normalize.css

Damit die Seite in allen Browsern möglichst gleich aussieht, wird Normalize.css verwendet, ein Projekt von Nicolas Gallagher und Jonathan Neal.

Media-Queries

Wenn bestimmte Stile nur auf einigen Geräten Sinn machen, verwenden Sie die folgenden Media-Queries, um die grundlegenden Umbruchpunkte in dem Rastersystem zu erstellen.

/* Extra-kleine Geräte (Smartphones, weniger als 768px) */
@media (max-width: @screen-xs-max) { ... }
/* Kleine Geräte (Tablets, 768px und breiter) */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
/* Mittlere Geräte (Desktop-PCs, 992px und breiter) */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } 
/* Große Geräte (Desktop-PCs, 1200px und breiter) */
@media (min-width: @screen-lg-min) { ... }

Container

Bootstrap benötigt ein Element, in dem Seiteninhalte und das Raster-System verpackt sind. Sie könen einen von zwei Containern zur Verwendung in dem Projekt aussuchen. Zu beachten ist, dass aufgrund von padding und mehr keiner der beiden Container verschachtelbar ist.

Verwenden Sie .container für einen sich anpassenden Container mit einer festen Breite.

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

Verwenden Sie .container-fluid für einen Container, der die gesamte Breite des Anzeigefensters einnimmt.

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

Raster-System

Bootstrap beinhaltet ein anpassungsfähiges, Mobile-First-basiertes, fließendes Rastersystem, das bis zu 12 Spalten über verschiedene Geräte- oder Viewport-Größen skaliert. Dabei sind vordefinierte Klassen für einfache Layout-Optionen

Einleitung

Rastersysteme werden dafür verwendet, Seitenlayouts mit einer Reihe von Zeilen und Spalten zu erstellen, die Ihre Inhalte beherbergen. Hier steht, wie das Bootstrap-Rastersystem funktioniert:

  • Zeilen (.rows) müssen für korrekte Ausrichtung und Abstände in einem .container (fixierte Breite) oder .container-fluid (ganze Breite) platziert werden.
  • Verwenden von Zeilen, um horizontale Gruppen von Spalten zu erstellen.
  • Inhalt sollte in Spalten platziert werden und nur Spalten dürfen direkte Kinder von Zeilen sein.
  • Vordefinierte Raster-Klassen wie .row und .col-xs-4 sind verfügbar für die schnelle Erstellung von Layouts.
  • Spalten erzeugen „Furchen“ (Lücken zwischen Spalten-Inhalt) über padding. Dieser Innenabstand wird in Zeilen von der ersten und letzten Spalte über negativen Außenabstand wieder abgezogen.
  • Der negative Außenabstand ist der Grund dafür, dass die Beispiele unten breiter sind als der Fließtext. Durch den negativen Außenabstand ist der Inhalt von Raster-Spalten auf einer Linie mit Inhalt außerhalb von jeglichen Raster-Elementen.
  • Raster-Spalten werden definiert, indem die Anzahl von zwölf verfügbaren Spalten angegeben werden, über die die Raster-Spalte gelegt werden soll. Zum Beispiel können drei gleich große Spalten mit drei .col-xs-4 erstellt werden.
  • Falls mehr als 12 Spalten in einer einzigen Zeile platziert werden, wird jede Gruppe mit Extra-Spalten als eine Einheit in eine neue Zeile rutschen.
  • Rasterklassen beziehen sich auf Geräte mit Bildschirmbreiten, die genau so groß oder größer als die Umbruchpunkt-Größen sind. Sie überschreiben Rasterklassen, die sich auf kleinere Geräte beziehen. Wenn Sie eine .col-md--Klasse auf ein Element anwenden, wird sich dies daher nicht nur auf die Stile auf mittleren Geräten auswirken, sondern auch auf diejenigen auf großen Geräten, es sei denn es gibt außerdem eine .col-lg--Klasse.

Sehen Sie sich die Beispiele an, um diese Prinzipien in einem Code einzubauen.

Raster-Optionen

Schauen Sie sich in einer praktischen Tabelle an, wie die Aspekte von Bootstraps Rastersystem auf den verschiedenen Geräten funktionieren.

Extra-kleine Geräte Smartphones (<768px) Kleine Geräte Tablets (?768px) Mittlere Geräte Desktop-PCs (?992px) Große Geräte Desktop-PCs (?1200px)
Raster-Verhalten Durchgehend horizontal Zuerst minimiert, über Umbruchpunkten horizontal
Container-Breite Keine (auto) 750px 970px 1170px
Klassen-Präfix .col-xs- .col-sm- .col-md- .col-lg-
Spaltenanzahl 12
Abstandsbreite 30px (15px auf jeder Seite einer Spalte)
Verschachtelbar Ja
Abrückung Ja
Spalten-Umordnung Ja

Beispiel: Übereinander, nebeneinander

Sie brauchen nur ein paar .col-md-*-Klassen, um ein grundlegendes Raster zu erstellen, dessen Spalten auf Smartphones und Tablets (extra-klein bis klein) übereinander und dann ab mittleren Bildschirmgrößen auf Desktop-PCs nebeneinander angeordnet sind. Platziert werden die Rasterspalten einfach in irgendeiner .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Beispiel: Fließender Container

Ein auf festen Breiten basiertes Raster-Layout kann jederzeit in ein Layout über die ganze Breite der Seite verwandelt werden, indem Sie den äußeren .container in einen .container-fluid ändern.

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

Beispiel: Mobil und Desktop-PC

Wenn Sie die Spalten auf kleineren Geräten nicht einfach nur übereinander haben wollen, verwenden Sie die extra-kleinen und mittleren Geräte-Raster-Klassen, indem Sie .col-xs-* .col-md-* zu den Spalten hinzufügen. Schauen Sie sich das Beispiel unten an, um besser zu verstehen, wie das funktioniert.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Sie stapeln die Spalten auf mobilen Geräten, 
indem Sie eine über die ganze und eine über die halbe Breite spannen -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Spalten sind zunächst 50% breit und vergrößern sich auf Desktop-PCs auf 33.3% -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Spalten sind auf allen Bildschirmgrößen immer 50% breit -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Beispiel: Mobil, Tablet und Desktop-PC

Sie bauen das vorherige Beispiel weiter aus, indem Sie noch dynamischere und vielfältigere Layouts mit den Tablet-Klassen .col-sm-* erstellen.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: Setzen Sie die Floats der XS-Spalten zurück, falls der Inhalt nicht gleich hoch ist -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Beispiel: Spaltenumbruch

Falls mehr als 12 Spalten in einer einzigen Zeile platziert werden, wird jede Gruppe mit Extra-Spalten als eine Einheit in eine neue Zeile rutschen.

.col-xs-9
.col-xs-4 Da 9 + 4 = 13 > 12, rutscht dieser 4 Spalten breite div als ganze Einheit in eine neue Zeile.
.col-xs-6 Folgende Spalten werden in der neuen Zeile fortgeführt.
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4
        <br>Da 9 + 4 = 13 &gt; 12, rutscht dieser 4 Spalten breite div als ganze Einheit in eine neue Zeile.
  </div>
  <div class="col-xs-6">.col-xs-6<br>Folgende Spalten werden in der neuen Zeile fortgeführt.</div>
</div>

Responsive Spalten-Resets

Mit den vier Gliedern unseres Raster-Systems ist es fast unvermeidbar, dass Sie auf Probleme stoßen, wenn bei bestimmten Umbruchpunkten die Spalten nicht richtig positioniert werden, da eine höher ist als die andere. Um dies zu beheben, können Sie eine Kombination aus .clearfix und unseren Responsiven Hiflsmitteln verwenden.

.col-xs-6 .col-sm-3 Verändern Sie die Breite des Browser-Fensters oder sehen Sie sich das Beispiel auf dem Smartphone an.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Der clearfix wird nur für die benötigte Breite des Ansichtsfensters hinzugefügt -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Außerdem kann es sein, dass Sie Spalten-Abrückungen, -Pushes und -Pulls zurücksetzen müssen. Schauen Sie es sich im Raster-Beispiel an.

<div class="row">
  <div class="col-sm-5 col-md-6">
      .col-sm-5 .col-md-6
  </div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
      .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
  </div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">
      .col-sm-6 .col-md-5 .col-lg-6
  </div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">
      .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
  </div>
</div>

Spalten abrücken

Sie können mit Hilfe der .col-md-offset-*-Klassen Spalten nach rechts verschieben. Diese Klassen vergrößern den linken Außenabstand einer Spalte um * Spalten. .col-md-offset-4 verschiebt eine .col-md-4-Spalte zum Beispiel um vier Spalten nach rechts.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Spalten verschachteln

Um den Inhalt eine weitere Raster-Ebene hinzuzufügen, fügen Sie einfach eine neue .row und eine Reihe von .col-md-*-Spalten innerhalb von einer bestehenden .col-md-*-Spalte hinzu. Verschatelte Zeilen sollten bis zu 12 Spalten beinhalten (es ist nicht notwendig, dass alle 12 verfügbaren Spalten genutzt werden).

Ebene 1: .col-sm-9

Ebene 2: .col-xs-8 .col-sm-6
Ebene 2: .col-xs-4 .col-sm-6
<div class="row">
  <div class="col-sm-9">
    Ebene 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Ebene 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Ebene 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Spalten umordnen

Änderen Sie die Reihenfolge von Raster-Spalten mit den Klassen .col-md-push-* und .col-md-pull-*.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Responsive Hilfsmittel

Für schnellere Entwicklung von Seiten, die gut auf mobilen Geräten aussehen, gibt es diese Hilfsklassen, mit denen über Media-Queries Inhalte pro Gerät ein- und ausgeblendet werden können. Außerdem gibt es Hilfsklassen für das Ein- und Ausblenden von Inhalt für den Druck eines Dokuments.

Versuchen Sie, diese Klassen nur eingeschränkt zu verwenden und vermeiden Sie, damit ganz verschiedene Versionen der gleichen Seite zu erstellen. Stattdessen können Sie diese verwenden, um die Anzeige auf jedem Gerät stimmig zu machen.

Verfügbare Klassen

Verwenden Sie einzelne oder eine Kombination der verfügbaren Klassen, um Inhalt auf verschiedenen Anzeigefenstergrößen ein- und auszublenden.

Extra-kleine Geräte Smartphones (<768px) Kleine Geräte Tablets (?768px) Mittlere Geräte Desktop-PCs (?992px) Große Geräte Desktop-PCs (?1200px)
.visible-xs-* Sichtbar
.visible-sm-* Sichtbar
.visible-md-* Sichtbar
.visible-lg-* Sichtbar
.hidden-xs Sichtbar Sichtbar Sichtbar
.hidden-sm Sichtbar Sichtbar Sichtbar
.hidden-md Sichtbar Sichtbar Sichtbar
.hidden-lg Sichtbar Sichtbar Sichtbar

Ab v3.2.0 gibt es .visible-*-*-Klassen für jeden Umbruchpunkt in drei Variationen, eine für jeden der unten aufgeführten Werte der CSS-Eigenschaft display.

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

Die verfügbaren .visible-*-*-Klassen für sehr kleine (xs) Bilschirme sind also zum Beispiel: .visible-xs-block, .visible-xs-inline und .visible-xs-inline-block. Die Klassen .visible-xs, .visible-sm, .visible-md und .visible-lg bleiben weiterhin bestehen, sind aber ab v3.2.0 als veraltet markiert. Sie entsprechen in etwa .visible-*-block, abgesehen von besonderen Ergänzungen für Elemente rund um <table>.

Klassen für den Druck

So ähnlich wie die normalen responsiven Klassen gibt es auch noch Klassen für das Ein- und Ausblenden beim Druck.

Klassen Browser Druck
.visible-print-block .visible-print-inline .visible-print-inline-block Sichtbar
.hidden-print Sichtbar

Die Klasse .visible-print bleibt weiterhin bestehen, ist aber ab v3.2.0 als veraltet markiert. Sie entspricht in etwa .visible-print-block, abgesehen von besonderen Ergänzungen für Elemente rund um <table>.

Typografie

Die verwendete font-family ist die TheSans LT. Sie wird mit font-weight 400 als TheSans LT Regular und mit font-weight 700 als TheSans LT Bold eingesetzt.

Gusen Fertelmann in jerting

Gusen Fertelmann in Tellopersch verbasen kalänter Verlungen tonnsten. Mehr togen in Rullewarn senst in Gerungen vertannen linst.

<h1>Gusen Fertelmann in jerting</h1>
<p class="lead">Gusen Fertelmann ...</p>

h1-Überschrift

Gusen Fertelmann in jerting

Gusen Fertelmann in Tellopersch verbasen kalänter Verlungen tonnsten. Mehr togen in Rullewarn senst in Gerungen vertannen linst.

<h2>Gusen Fertelmann in jerting</h2>
<p>Gusen Fertelmann ...</p>

h2-Überschrift

Gusen Fertelmann in jerting

Gusen Fertelmann in Tellopersch verbasen kalänter Verlungen tonnsten. Mehr togen in Rullewarn senst in Gerungen vertannen linst.

<h3>Gusen Fertelmann in jerting</h3>
<p>Gusen Fertelmann ...</p>

h3-Überschrift

Gusen Fertelmann in jerting

Gusen Fertelmann in Tellopersch verbasen kalänter Verlungen tonnsten. Mehr togen in Rullewarn senst in Gerungen vertannen linst.

<h4>Gusen Fertelmann in jerting</h4>
<p>Gusen Fertelmann ...</p>

h4-Überschrift

Gusen Fertelmann in jerting

Gusen Fertelmann in Tellopersch verbasen kalänter Verlungen tonnsten. Mehr togen in Rullewarn senst in Gerungen vertannen linst.

<h5>Gusen Fertelmann in jerting</h5>
<p>Gusen Fertelmann ...</p>

h5-Überschrift

Responsive_Devices_panorama

© Gusen Fertelmann – Fotarsen

<p class="note">© Gusen Fertelmann – Fotarsen</p>

Bild-Copyright unter dem Bild

Responsive_Devices

© Junst Jenerwein – Fotofix

<div class="image-item">
    <img src="example.png" class="img-responsive" />
    <p class="note inside">© Junst Jenerwein – Fotofix</p>
</div>

Bild-Copyright im Bild

Responsive_Devices_Ausschnitt_2

© Junst Jenerwein – Fotofix

<div class="image-item">
    <img src="example.png" class="img-responsive" />
    <p class="note inside black right">© Junst Jenerwein – Fotofix</p>
</div>

Bild-Copyright im Bild Varianten

.black
.grey-dark
.grey
.grey-light

  • Flyer Mosenhast
  • Kalänthern in Mollewarn
  • Gusen Fertelmann
<ul>
    <li><span>Flyer Mosenhast</span></li>
    <li><span>Kalänthern in Mollewarn</span></li>
    <li><span>Gusen Fertelmann</span></li>
</ul>

Unsortierte Liste

Tabellen

# Gusen Fertlemann Mosenhast Belungen Instropen Bergansen Verungen
1 Dersemerz 12.000 34.000 AW Instrenfrunt josen
2 Vernaten Pron. 10.000 40.000 U Bernten instrop
3 Posetrohn 12.000 40.000 AW Verlunten instrop
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Gusen Fertlemann</th>
                <th>...</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>...</td>
            </tr>
            <tr>
                ...
            </tr>
        </tbody>
    </table>
</div>

Tabelle Responsive

# Gusen Fertlemann Mosenhast Belungen Instropen Verungen
1 Dersemerz 12.000 34.000 AW josen
2 Vernaten Pron. 10.000 40.000 U instrop
3 Posetrohn 12.000 40.000 AW instrop
<table class="table table-hover">
   ...

Tabelle mit hover-Effekt

# Gusen Fertlemann Mosenhast Belungen Instropen Verungen
1 Dersemerz 12.000 34.000 AW josen
2 Vernaten Pron. 10.000 40.000 U instrop
3 Posetrohn 12.000 40.000 AW instrop
<table class="table table-striped">
    ...

Tabelle mit farbigen Zellen

Buttons und Links

Verlinkende Elemente wie Buttons, Link-Listen und komplexere List-Elemente, die das Navigieren innerhalb der Seite vereinfachen.

Buttons

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

Einfacher Button

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

Standard Hwk Button

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

Erfolg Button

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

Info Button

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

Warnung Button

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

Achtung Button

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

Link Button

Linkelemente und Linklisten

<div class="link-item">
    <a href="#">
        <span class="glyphicon glyphicon-pfeil-rechts"></span> 
        Gusen Fertelmann
    </a>
</div>

Einfaches Link-Element mit Icon

<div class="link-item">
    <a href="#">
        <span class="glyphicon glyphicon-download"></span>
        <span class="small">
            <strong>Flyer Mosenhast instropen (536 kB)</strong>
            <br />
            Kalänthern in Mollewarn
        </span>
    </a>
</div>

Komplexeres Link-Element mit Icon

Voraussetzungen für Auszubildende
Vergütung während der Lehre
Ausbildung im Ausland
<div class="listgroup-intro">
    <h4>Linkliste</h4>
</div>
<div class="list-group">
    <a href="#" class="list-group-item clearfix">
        <div class="listgroup-text">
            <p>
                <strong>Voraussetzungen für Auszubildende</strong>
                <br>
                <span class="hidden-xs">In Tellopersch ...</span>
            </p>
        </div> 
    </a>
    <a href="#" class="list-group-item clearfix">
        <div class="listgroup-text">
            <p>...</p>
        </div> 
    </a>
    ...
</div>

Linkliste

Linkliste mit Thumbnails

App Lehrstellen
iOS, Android Lehrstellenradar 2.0 Nie war es einfacher einen Ausbildungsplatz zu finden
App Handwerker
iOS, Android Handwerkerradar 2.0 Auf der Suche nach qualifizierten Handwerkern?
App Azubi
iOS, Android AppZubi 2.0 AppZubi 2.0 ist dein ganz persönliches Navi durch die Ausbildungszeit.
<div class="listgroup-intro">
    <h4>Linkliste mit Thumbnails</h4>
</div>
<div class="list-group">
    <a href="#" class="list-group-item clearfix">
        <div class="listgroup-image">
            <img src="uploads/app_lehrstellen-150x150.png" alt="App Lehrstellen" class="img-responsive">
        </div>
        <div class="listgroup-text">
            <p>
                iOS, Android
                <br>
                <strong>Lehrstellenradar 2.0</strong>
                <br>
                Nie war es einfacher einen Ausbildungsplatz zu finden
            </p>
        </div> 
    </a>
    ...
</div>

Linkliste mit Thumbnails

Formulare

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

Checkbox

<div class="radio">
    <label>
        <input checked type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
        Option checked
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option 
    </label>
</div>
<div class="radio disabled">
    <label>
        <input disabled type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
        Option disabled 
    </label>
</div>

Radiobutton

<div class="form-group">
    <label class="sr-only" for="inputEMail">E-Mail</label>
    <input type="email" class="form-control " id="inputEMail" placeholder="E-Mail">
</div>
<div class="form-group">
    <label class="sr-only"  for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Passwort">
</div>

Eingabefelder

<div class="form-group has-success">
    <label class="control-label" for="eingabefeldErfolg1">Feld mit Erfolg</label>
    <input type="text" class="form-control" id="eingabefeldErfolg1">
</div>
<div class="form-group has-error">
    <label class="control-label" for="eingabefeldFehler1">Feld mit Fehler</label>
    <input type="text" class="form-control" id="eingabefeldFehler1">
</div>

Eingabefelder mit Meldung

Hinweis! Für diesen Service fallen zusätzliche Gebühren an.
<div class="alert alert-success" role="alert">
    <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span>
    </button>
    Erfolg
</div>
<div class="alert alert-info alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span>
    </button>
    <strong>Hinweis!</strong> ...
</div>
<div class="alert alert-danger" role="alert">
    <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span>
    </button>
    <strong>Warnung!</strong> ...
</div>

Warnhinweise