Das Spaltenlayout an verschiedene Displaygrößen anpassen

Transkript

Bootstrap bietet dank dieser speziellen Präfixe die Möglichkeit, auf unterschiedliche Bildschirmgrößen zu reagieren. Der Vorteil liegt darin, dass Sie nun nicht nur die Spaltengrößen dementsprechend anpassen können, sondern teilweise auch die Spaltenanzahl. Je nachdem, wie groß das Display ist, können Sie ganz flexibel reagieren, und das innerhalb eines einzigen Dokuments. Wir sehen wir uns das Ganze jetzt mal in der Praxis an. Bei uns ist es im Moment ja so, dass wir zwei schmalere Spalten haben und zwei breitere in der Mitte. Ich habe den Quelltext schon angepasst, dass ich diese spezielle Aufteilung für große Bildschirme reserviert habe. Jetzt folgt eine Anweisung für mittelgroße Bildschirme. Da hätte ich gerne, dass alle Spalten gleich groß dargestellt werden. Ich werde mir das mit STRG+C kopieren, um mir Tipparbeit zu sparen, und füge es dann gleich bei den anderen Spalten ein, weil das ja gleich groß werden soll. Wir speichern das Ganze und sehen es uns an. Ab dem Moment, wo ich jetzt auf eine kleinere Größe wechsle. sollte ich gleich große Spalten haben. Und tatsächlich, nicht gelogen, bei dieser eher mittelgroßen Ansicht habe ich jetzt vier gleich große Spalten. Der Luxus der unterschiedlichen Größen taucht erst bei einem großen Bildschirm auf. Damit nicht genug, möchte ich in einem weiteren Schritt dafür sorgen, dass bei einem schmalen Bildschirm eine schmalere und eine breitere Spalte in einer Reihe steht, bevor dann der Umbruch stattfindet. Auch das kann ich mit diesen "col"-Angaben umsetzen. Das heißt, ich sollte ganz oben anfangen. Das wird, wenn es schmaler wird, eine schmalere Spalte werden, aber sie wird größer werden als die bisherigen, einfach nur, damit ich den Umbruch dann auch erreichen kann. Weil 12 diese magische Zahl ist, bei der der Umbruch stattfinden wird. Hier mache ich dafür einen Wert von 7. Und das Ganze wiederhole ich hier. Hier habe ich dann "col-sm-7", und ganz unten werde ich wieder die Spalten auf fünf Spalten vom Grid reduzieren. Sehen wir uns an, wie das jetzt ausschaut. Ich speichere wieder mit STRG+S, hole mir meinen Firefox. Ich werde ihn schon mal ein bisschen kleiner schrumpfen, habe jetzt mal unsere gleich großen Spalten. Ich hole es uns her. Und wenn ich jetzt noch kleiner schrumpfe, kommt irgendwann der Moment, wo es umspringt auf diese Aufteilung mit Infotext, Artikel, Artikel, Infotext. Erst, wenn ich noch kleiner schrumpfe, erst dann komme ich zu dieser einspaltigen Ansicht. Damit habe ich mit wenig Tipparbeit eine unterschiedliche Ansichtsmöglichkeit für unterschiedliche Displaygrößen geschaffen. Und das alles in einem einzigen Dokument. Das ist sehr zeitsparend und gleichzeitig sehr praktisch und benutzerfreundlich.