Inhalte in Spalten verpackt

Die tatsächlichen Inhalte einer Seite werden letztendlich in sogenannten Spalten verpackt. Und wir denken uns zwölf Spalten, die dann auf die einzelnen Elemente aufgeteilt werden können. Zwischen diesen Spalten gibt es eine bestimmte Menge Gutter, und wenn Sie jetzt hier diese kryptischen Zahlen sehen, so ist das nichts anderes als eine Umrechnung von Pixelwerten in sogenannte rem-Werte. Das passiert jetzt in Bootstrap 4 überhaupt so oft wie möglich, nämlich das als Maßeinheit rem verwenden werden. Das klingt sehr abstrakt. Bei rems geht es aber darum, dass als Grundgrößeneinheit die zugrunde liegende Schriftgröße herangezogen wird. Bei Bootstrap 4 ist das 16 Pixel. Das heißt, die grundlegende Schriftgröße ist 16 Pixel. Und wenn ich jetzt eine Gutter habe, die zum Beispiel prinzipiell mal 30 Pixel groß sein soll, dann rechne ich diese 30 Pixel, dividiert durch meine Schriftgröße mit den 16 Pixeln, dann kommen dann bei den 30 Pixel auf 1,875 rem. Das heißt, pro Seite einer Spalte habe ich dann genau die Hälfte davon, ursprünglich 15 Pixel, jetzt 0,9375 rem, um noch etwas Puffer zur nächsten Spalte zu bekommen. Und es gibt eine sehr einheitliche Vorgehensweise, und zwar ich habe immer, wenn ich diese Spalten benennen möchte oder dieses Element benennen möchte, fange ich mit col an (für Column, also Spalte), dann kommt ein Größenkürzel für die Bildschirmgröße, das schauen wir uns gleich näher an, und dann kommt eine Zahl, die angibt, wie viel von diesen gedachten zwölf Spalten für dieses eine Element zur Verfügung gestellt werden sollte. Sehen wir uns jetzt aber die ganze Geschichte mal erst am Beispiel an. Hier hätte ich dann ein Element mit der Klasse col-md-4 und nach dieser Einteilung der Umbruchpunkte. Und der Bildschirmgröße ist ebenso, das md würde für einen mittelgroßen Bildschirm stehen, und auf diesem mittelgroßen Bildschirm würden eben vier von diesen zwölf Spalten in Anspruch genommen werden. Wir können uns das gleich an einem praktischen Beispiel anschauen. Ich möchte Ihnen nur jetzt zuerst noch schnell diese Umbruchpunkte zeigen. Die können jetzt nur gedanklich errechnet werden, aber sie stellen gedachte Bildschirmgrößen dar, das heißt, ich habe einen extra kleinen Bildschirm. Der ist kleiner als 544 Pixel in der Größe. Das ist neu in Bootstrap 4. In vorherigen Bootstrap-Versionen war small das Kleinste. Dann habe ich eben Small. Das ist größer oder gleich 576 Pixel. Dann gibt es Medium, Large und eben auch noch neu diese extra großen Bildschirme, das heißt, Bildschirme, die von der Anzeige her größer oder gleich 1200 Pixel sind. Und Sie sehen in der nächsten Zeile ein Rasterverhalten. Das Rasterverhalten heißt, ab welchem Punkt bricht mein Container um oder ab welchem Punkt versucht mein Container eben, dann die Inhalte neu anzuordnen. Und ich habe darauf einen gewissen Einfluss, weil ich dank dieser Präfixe, also xs, sm, md, lg, xl die Möglichkeit habe, spezielle Einstellungen für meine Elemente zu treffen. Gut, sehen wir uns das Ganze mal an einem praktische Beispiel an. Ich habe hier mein ursprüngliches, seltsames Konstrukt, wo ich bereits einen Container habe. Innerhalb dieses Containers liegt jetzt schon eine sogenannte Row auf dem Abflug sozusagen, und jetzt möchte ich so Spaltenelemente erzeugen. Es heißt, wir brauchen die Klasse col-md-, ich sage jetzt einmal 4, und in diese Spalte packe ich jetzt meine h1. Mit Strg+X hole ich es raus, mit Strg+V füge ich es dort wieder ein und kopiere mir jetzt dieses Element dreimal. Mit Strg+C für Kopieren. Nächste Zeile. Strg+V für das erste Mal Einfügen und Strg+V für das zweite Mal Einfügen. So. Jetzt habe ich drei Spaltenelemente. Im Moment bei dieser Bildschirmgröße auf der rechten Seite liegen sie noch untereinander, weil nicht mehr Platz dafür wäre und weil ich diesen speziellen Umbruchpunkt bereits erreicht habe, demzufolge ich dann eine andere Darstellung bekomme. Wichtig ist, dass Sie auf der linken Seite sehen, dass diese im row-Element wohnenden drei Elemente insgesamt von der Zahl her die Zahl 12 ergeben. Das heißt, alle zwölf Spalten sind sozusagen in Verwendung. Und ich habe als Container eine fixe Größe angegeben, das heißt, wenn ich jetzt maximiere auf die Gesamtgröße meines Bildschirms, dann bekomme ich tatsächlich meine drei Elemente auch nebeneinander angezeigt, weil hier genügend Platz dafür ist. Mit dem Kleiner werden des Bildschirms allerdings wird das Ganze dann untereinander dargestellt, und das ist eben das Geheimnis von Bootstrap, dass es, ohne dass ich großartig etwas dazu beitragen muss, dank dieser Regelung von Containern Reihen und Spalten eine sehr flexible Ausgabe der Inhalte ermöglicht. Und je nachdem, wie viel Platz dem Inhalt zur Verfügung gestellt wird, kann der Inhalt sich dann gut sortiert darstellen.