Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Das Spaltenlayout an verschiedene Displaygrößen anpassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bootstrap sorgt dank unterschiedlicher Präfixe dafür, dass Ihr Layout gezielt auf unterschiedliche Displaygrößen reagieren kann.
03:44

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.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!