CSS Tutorial und HTML Beispiele

CSS (Cascading Style Sheets) Basics Tutorial. Dazu Beispiele mit HTML in Verbindung mit CSS.

Bootstrap Grid Template

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- MaxCDN CDN Bootstrap Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- MaxCDN CDN Bootstrap Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjmdfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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 .col-xs- .col-sm- .col-md- .col-lg-
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.