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.

Weiterführende Informationen

Ich habe hier 3 Rasterelemente (2-, 3- und 4-Spalten) vorinstalliert.
Diese Rasterelemente können auch verschachtelt werden.

Ab v3.2.0 kann für jede Spalte eine Hintergrundfarbe angegeben werden!

Ab v3.2.4 können Spalten mit Hintergrundfarbe auf gleiche Höhe gesetzt werden!

Ab v3.2.4 kann für jede Spalte eine extra class angebracht werden (z.B.: hidden-xs).

Hier ein Beispiel mit 2 Spalten:

2 Spalten Layout

Spalte 1

Unter Raster-Elemente "2 Spalten" auswählen. Hier können noch Einstellungen unter Erweiterungsoptionen für die Spaltenbreite pro Bildschirmgröße angegeben werden.

In dem neuen "2 Spalten Raster-Layout" kann wie gewohnt, pro Spalte ein oder mehrere Contentelement(e) eingefügt werden.

In den Erweiterungsoptionen kann pro Spalte eine Raster-Klasse angegeben werden.

Spalte 2

Hebe einen Absatz hervor, indem du .lead hinzufügst.

 

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

Weiterführende Informationen

Beispiel:

Gut geeignet für einen Teaser-Text.

Um Text-Zeilen und -Blöcke in ihrer Bedeutung herabzusetzen, verwende das Tag <small>, das einen Text auf 85% der Größe seines übergeordneten Elements setzt. Überschriften-Elemente erhalten ihre eigene font-size für verschachtelte <small>-Elemente.

 

<small>...</small>

Weiterführende Informationen

Beispiel:

Diese Textzeile steht im Kleingedruckten.

Zeige Kontakt-Informationen für die nächste übergeordnete Person oder ein gesamtes Angebot an. Denk daran, die Zeilen mit <br> am Ende vernünftig zu formatieren.

 

<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
Tel.: (012) 345678-9
</address>

Weiterführende Informationen

Beispiel:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
Tel: (123) 456-7890

Um Inhaltsblöcke aus einer anderen Quelle in deinem Dokument zu zitieren.

 

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Weiterführende Informationen

Beispiel:

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

Ohne Gestaltung

Entferne die Standard-Gestaltung (list-style) und den linken Abstand von Listen-Einträgen.

 

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

Weiterführende Informationen

Beispiel:

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Inline

Platziere alle Listen-Objekte in einer Zeile mit display: inline-block; und ein wenig Innenabstand.

 

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

Weiterführende Informationen

Beispiel:

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Inline

Um Code in Fließtext einzubinden, markiere diesen mit <code>.

 

Zum Beispiel sollte <code><section></code> mit in der Textzeile stehen.

Weiterführende Informationen

Beispiel:

Zum Beispiel sollte <section> mit in der Textzeile stehen.

Code-Block

Nutze <pre> für mehrere Zeilen Code. Denk daran, spitze Klammern in deinem Code zu escapen, damit alles richtig angezeigt wird.

 

<pre><p>Ein bisschen Beispieltext...</p></pre>

Weiterführende Informationen

Beispiel:

 

<p>Ein bisschen Beispieltext...</p>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bilder-Konturen

Füge Klassen zu <img>-Elementen hinzu, um Bilder in jedem Projekt ganz einfach zu gestalten.

 

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

 

Weiterführende Informationen

Beispiel:

Kontext-Farben

Versehe jeden Text mit mehr Bedeutung, indem du die Hilfsklassen für Kontextfarben verwendest.

 

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

Weiterführende Informationen

Beispiel:

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Der neue Tab/Reiter "Bootstrap" ersetzt den fehlenden "Section Frame" und enthält einige Bootstrap Responsive Hilfsmittel.

Informationen/Demo