Das Grid System von Bootstrap 5
In diesem Post wollen wir tiefer eintauchen ins Thema und werfen einen Blick auf das Grid System von Bootstrap !
Wenn wir den Begriff ins Deutsche übersetzen, erhalten wir: Rastersystem.
Der Gedanke dahinter: Wir unterteilen die sichtbare Fläche (Bildschirm) und erhalten so eine Ordnung, an der wir uns orientieren können.
Ein Bild zur Veranschaulichung:
Im Bild oben sehen wir so ein Rastersystem. Da wir in Html unweigerlich mit row (Reihe) und col (Kolumne/Spalte) in Verbindung kommen, ist es naheliegend, das Bootstrap sein Grid System darauf aufbaut.
Zum besseren Verständnis: Im Bild oben sehen 12 Spalten, jeweils markiert mit der 1. Die zweite Reihe ist unterteilt in Flächen, die jeweils 2 Spalten breit sind, markiert mit 2, usw.
Das Grid System von Bootstrap hilft dabei, das unsere Website auf verschiedenen Bildschirmen (Mobile, Tablet, Desktop) ähnlich funktional, und ansprechend dargestellt wird. Ohne das wir dabei sehr viel Plattformspezifischen Code schreiben müssen.
Wie immer verwenden wir Visual Studio Code und nehmen das Template von der Homepage von Bootstrap als Grundlage :
<!doctype html> <html lang="de"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h6>Bootstrap Html Css3 Test</h6> <header> <img src="bilder/logo21.png" alt="logo"> </header> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script> </body> </html>
Breakpoints
Ihre Website soll also auf verschiedenen Bildschirmen möglichst ansprechend aussehen. Da sollte man wissen, wo genau befinden sich die Grenzen, die Breakpoints von einer Grösse zur nächsten:
Sie wissen ja jetzt um die Bedeutung von Reihen und Spalten im Rastersystem von Bootstrap 5. Der nächste Begriff der in diesen Zusammenhang gehört ist Container. Ein Container ist ein rechteckiger Bereich auf dem Bildschirm und wird mit dem Html Element <div>...</div> umgesetzt. In einem Container platzieren wir Reihen, in diesen Reihen wiederum Spalten.
Mit diesen drei Elementen, Container, Reihen, Spalten, haben Sie bereits die wichtigsten Elemente die es braucht um ein Layout für Ihre Website zu erstellen.
Nun geht es weiter mit Beispiel Code. Als erstes fügen Sie ihrem Code ein paar Zeilen Css3 hinzu:
<style> [class*="col"]{ padding: 1rem; background-color:lightgray; border: 2px solid white; text-align: center; } </style>
<div class="container-md"> <div class="row"> <div class="col-sm"> 1 </div> <div class="col-sm"> 2 </div> </div> </div>
Das nächste <div> Tag erhält die Klasse row, gefolgt von zwei <div> Tags der Klasse col-sm. Betrachten Sie nun das Ergebnis:
Verkleinern Sie Ihren Webbrowser zu einem sehr kleinen Bildschirm erhalten Sie folgendes Bild:
Jetzt können Sie den Code ändern und ein wenig experimentieren. So zum Beispiel:
<div class="container-md"> <div class="row"> <div class="col-md">Erste</div> <div class="col-md">Zweite</div> <div class="col-md">Dritte</div> </div> <div class="row"> <div class="col-md">Vierte</div> <div class="col-md">Fünfte</div> <div class="col-md">Sechste</div> <div class="col-md">Siebte</div> </div> </div>
Im Code oben, sehen Sie nun zwei Reihen. In der zweiten Reihe sind vier Spalten programmiert.
Im Bild dazu sehen Sie, wie Bootstrap die Grösse der einzelnen Spalten automatisch kalkuliert. Zu Grunde liegt dabei immer das Model, das der sichtbare Bildschirm in maximal 12 Spalten aufgeteilt werden kann. Das wars für diesen Post. Bis bald !
Kommentare
Kommentar veröffentlichen