Aus dem Kurs: Bootstrap 5 Grundkurs

Responsive Raster – Tutorial zu Bootstrap

Aus dem Kurs: Bootstrap 5 Grundkurs

Gratismonat starten Für Ihr Team erwerben

Responsive Raster

“

Das Raster von Bootstrap ist responsive, d. h., Sie können unterschiedliche Aufteilungen je nach Viewport-Größe definieren. Wenn Sie bei den Raster-Elementen col schreiben oder col mit einer Zahl, dann gilt diese Aufteilung ab dem kleinsten Viewport für alle Viewports. So sieht das Beispiel aus. Und um zu zeigen, dass das für alle Viewports gilt, aktiviere ich einmal die Entwicklertools. Ich bin im Firefox, ich habe mit der rechten Maustaste geklickt, ich gehe auf Untersuchen und wähle dann dieses Symbol und dann kann ich unterschiedliche Viewport-Größen ausprobieren. Ich sehe den aktuellen Viewport hier oben angegeben und man merkt, die Aufteilung ändert sich nicht. Sie sehen außerdem, dass es hier so Sprünge gibt, wie breit die Elemente sind. Das liegt daran, dass es ein umfassendes Element mit der Klasse "container" gibt. Nun kann ich angeben, dass ich möchte, dass diese Aufteilung erst ab der Größe Small stattfinden soll. Dafür ergänze ich "sm" für Small und ich kann auch noch weiter differenzieren und beispielsweise einmal Folgendes schreiben: "col-sm-4" und "col-md-3". D. h., ich möchte, dass bei ganz kleinem Viewport die Elemente untereinander sind, ab der Größe Small sollen die Elemente dann nebeneinander angeordnet werden und gleich groß sein und ab der Größe Medium gebe ich dann noch eine eigene Aufteilung, dann soll das mittlere Element doppelt so groß sein wie die anderen. Wenn wir das Beispiel ansehen, dann sind bei kleinem Viewport die Elemente untereinander, dann wird es größer. Wir haben diese Aufteilung hier. Und wenn ich dann zur Größe Medium komme, sieht man beim zweiten Beispiel, dass dieses Element jetzt doppelt so groß ist. Und diese Angaben können Sie so mischen, wie Sie wollen, und Sie schauen einfach am besten mit Ihren echten Inhalten, wo passt welche Aufteilung am besten. Und ein Beispiel, wie man das auch mischen kann, möchte ich noch zeigen. Hier gebe ich mal an "col-md-8" und "col-md-4" und außerdem möchte ich bei kleinem Viewport, dass dieses Element nur halb so breit ist. Es geht nun um dieses Beispiel. Da sieht man, bei kleinem Viewport ist das Element B nur halb so breit, weil ich "col-md-8" angegeben habe. Bei größerem Viewport gilt, dass dieses Element sich über acht Spalten erstreckt und dieses hier über vier. Prinzipiell ist das Ganze mobile-first aufgebaut, d. h., die Angabe beginnen Sie mit der kleinsten Änderung und die gilt dann so lange, bis Sie eine weitere Änderung für einen größeren Viewport bestimmen. Sie können übrigens diese col-Klassen auch ohne "row" nehmen, um die Breite von Elementen zu beschränken. Und das habe ich bei diesem Beispiel gemacht, da habe ich geschrieben "col-md-6", d. h., ab der Größe Medium soll dieses Element nur sich über sechs Spalten erstrecken. Ich habe in diesem Fall aber gar kein Raster und ich nehme das einfach nur für die Breitenangabe. Und das ist hier mein Element, also, ab dem Viewport Medium ist es jetzt nur noch halb so breit. Das ist manchmal ganz praktisch. Das responsive Raster funktioniert so, dass Sie den Breakpoint angeben und dann über wie viel Spalten sich ein Element erstrecken soll. Und Sie können das ganz frei bestimmen, also beispielsweise angeben, dass bei kleinem Viewport die Elemente untereinander sein sollen und bei größerem nebeneinander, und auch wie breit die dann jeweils sein sollen, lässt sich genau festlegen.

Inhalt