Bei der Erstellung von Bootstrap Templates kann es hilfreich sein, das im Vorfeld ein wenig mit dem Bootstrap Grid (Raster) experimentiert wird. Um dafür ohne größere Umstände eine HTML5 Bootstrap Template zu erschaffen, bietet es sich an, das von MaxCDN bereit gestellte Bootstrap CDN (Content Delivery Network) zu verwenden. Im folgenden Bootstrap Template Beispiel, wird der Grundaufbau des Bootstrap Grid Systems verdeutlicht und soll zeigen, wie einfach die Handhabung eines Bootstrap Grid Templates ist.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Bootstrap Grid Beispiel</title>
<!-- MaxCDN CDN Bootstrap Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- MaxCDN CDN Bootstrap Optional theme -->
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
<!-- MaxCDN CDN Bootstrap Latest compiled and minified JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- CSS Formatierung zur besseren Bootstrap Grid Visualisierung -->
<style>
div.row { border-bottom: 1px solid lightgrey; }
div.row div { padding-bottom: 5px; }
div.row div h4 { padding-top: 10px; }
div.row div h5 { border-top: 5px solid lightgreen; padding-top: 10px; font-weight: 600;}
div.row div:nth-child(2) > h5 { border-top-color: bisque; }
div.row div:nth-child(3) > h5 { border-top-color: lightcoral; }
div.row div:nth-child(4) > h5 { border-top-color: lightblue; }
</style>
</head>
<body>
<!-- Die Bootstrap CSS Klasse ".container", umschliesst alle Zeilen (rows) -->
<div class="container">
<div class="row">
<div class="col-md-12"><h4>Es folgt eine Zeile mit 4 gleichbreiten Spalten</h4></div>
</div>
<div class="row">
<div class="col-md-3"><h5>Spalte 1</h5>25% Breite - padding links und rechts 15px</div>
<div class="col-md-3"><h5>Spalte 2</h5>25% Breite - padding links und rechts 15px</div>
<div class="col-md-3"><h5>Spalte 3</h5>25% Breite - padding links und rechts 15px</div>
<div class="col-md-3"><h5>Spalte 4</h5>25% Breite - padding links und rechts 15px</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Und weitere Zeilen mit unterschiedlich breiten Spalten</h4></div>
</div>
<div class="row">
<div class="col-md-6"><h5>Spalte 1</h5>50% Breite - padding links und rechts 15px</div>
<div class="col-md-6"><h5>Spalte 2</h5>50% Breite - padding links und rechts 15px</div>
</div>
<div class="row">
<div class="col-md-8"><h5>Spalte 1</h5>66.5% Breite - padding links und rechts 15px</div>
<div class="col-md-4"><h5>Spalte 2</h5>33.5% Breite - padding links und rechts 15px</div>
</div>
<div class="row">
<div class="col-md-3"><h5>Spalte 1</h5>25% Breite - padding links und rechts 15px</div>
<div class="col-md-6"><h5>Spalte 2</h5>50% Breite - padding links und rechts 15px</div>
<div class="col-md-3"><h5>Spalte 3</h5>25% Breite - padding links und rechts 15px</div>
</div>
</div>
</body>
</html>Die Kombination der Spaltenbreiten können beliebig variiert werden. Zeilen und Spalten lassen sich ineinander verschachteln (Bootstrap Nesting columns). Zu beachten wäre, das beim Ergebnis der Spalten-Addition im Bootstrap Grid, immer 12 als Summe erwartet wird. Beispiel: col-md- 2+7+3 oder col-md- 5+3+4. Hat man erst einmal ein Grundverständnis für das Bootstrap Grid entwickelt, ist die weitere Arbeit damit ein Kinderspiel.
Bootstrap breakpoints (CSS media query)
Das oben gezeigt Beispiel verwendet zur Spaltenteilung einzig die .col-md-# CSS Klasse. Es lassen sich im Bootstrap Grid aber noch 3 weitere Breakpoints (Umbrüche) setzen. Die CSS Klassen .col-xs-#, .col-sm-#, .col-md-# und .col-lg-#, werden mittels CSS media queries gesteuert und haben die Funktion, auf unterschieldiche Bildschirmauflösungen zu reagieren.
| Sehr kleine Geräte Handys (<768px) | Kleine Geräte Tablets (≥768px) | Mittelgroße Geräte Desktops (≥992px) | Größere Geräte Desktops (≥1200px) |
|---|---|---|---|---|
Raster verhalten | Anzeige immer Horizontal | Nebeneinander, horizontale Anzeige nach gesetzten breakpoints | ||
Container-Breite | keine (automatisch) | 750px | 970px | 1170px |
CSS Klasse |
|
|
|
|
Anzahl Spalten | 12 | |||
Spaltenbreite | Auto | ~62px | ~81px | ~97px |
Spaltenabstand | 30px (15px auf beiden Seiten der Spalte) | |||
Verschachtelbar | Ja | |||
Spalten versetzbar | Ja | |||
Spaltensortierung | Ja | |||
Quelle: Bootstrap Grid options
Wie die Tabelle zeigt, lassen sich mit dem Bootstrap Grid, sehr komfortabel Responsive Templates realisieren. Die mitgelieferten CSS Media Queries decken dabei ein größes Spektrum an Ausgabegeräten ab und das Bootstrap Template wird immer optimal präsentiert.
Bootstrap offset Spalten
Um Spalten innerhalb einer Zeile (.row) im Bootstrap-Raster nach rechts zu versetzten, steht die CSS Klasse .col-md-offset-# zur Verfügung. In diesem Beispiel wird die zweite Spalte, um 6 Spalten nach rechts verschoben.
<div class="container">
<div class="row">
<div class="col-md-3"><h5>Spalte 1</h5>25% Breite ohne .offset CSS Klasse - padding links und rechts 15px</div>
<div class="col-md-3 col-md-offset-6"><h5>Spalte 2</h5>25% Breite - 50% (6 Spalten) nach rechts - padding links und rechts 15px</div>
</div>
</div>Die Offset-Variationen (Bootstrap Offsetting columns) sind in diesem Bootstrap Grid, auch wieder flexibel veränderbar. Mit den Media Query Breakpoint CSS Klassen können obendrein verschiedene Endgeräte angesteuert werden.
Bootstrap pull und push
Mit den Bootstrap .pull und .push CSS Klassen, wird die Reihenfolge der Spalten beim jeweiligen Display-Breakpoint festgelegt.
<div class="container">
<div class="row">
<div class="col-md-6 col-md-push-6"><h5>Spalte 1</h5>50% Breite mit .col-md-push-6 CSS Klasse - padding links und rechts 15px</div>
<div class="col-md-6 col-md-pull-6"><h5>Spalte 2</h5>50% Breite mit .col-md-pull-6 CSS Klasse - padding links und rechts 15px</div>
</div>
</div>Die Order (Bootstrap Column ordering) der Spalten bei einer Bildschirmauflösung zwischen 992px und 1200px, ist hier umgekehrt. Als ersten wird in dieser Zeile "Spalte 2" und danach "Spalte 1" angezeigt.
