Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Das Spaltenlayout mit Bootstrap festlegen

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Spalten sind dank der in Bootstrap eingebauten Stile schnell erzeugt und flexibel gestaltbar.
04:08

Transkript

Ich habe nun etwas vorgearbeitet und habe bereits Spalten erzeugt. D. h., ich habe die Schreibarbeit bereits erledigt. Das steht für meinen mittleren Bereich, für diesen "Über"-Bereich, wo ich in diesen vier Spalten vier kleine Artikel haben möchte, die eben beschreiben, was ich so tue. Ich habe noch dazu von bootstrap vorgefertigte Versatzstücke genommen, sogenannte Paneele für links und rechts, und in der Mitte sind meine normalen Artikel. Wie das ganze jetzt im Quelltext ausschaut, können wir uns hier ansehen. Alles steht und fällt, wenn Sie mit Spalten arbeiten, mit dem Container. D. h., Ihre Spalten müssen auf jeden Fall in so einen Container gepackt werden, wobei Sie dann wählen können, ob Sie einen Container mit fixer Breite wollen, so wie ich hier, oder ob Sie einen Container wollen, der die gesamte Breite des Bildschirms ausnutzt. das wäre dann "container-fluid" als Klassenangabe. Innerhalb dieses Containers können nun die Zeilen für Ihre Spalten zu liegen kommen. Die Zeilen haben die Klasse "row" und umfassen jetzt alle vier Spalten, die ich habe; hier unten endet "row" erst wieder. Die Spalten selbst sind bei mir dargestellt durch meine Artikel, und bekommen als Klasse nun, je nachdem, was ich möchte, spezielle Bezeichnungen mit. Diese Bezeichnungen sind immer gleich aufgebaut. Das heißt, "col" steht für die Spalte, das "md" in meinem Fall jetzt für ein mittelgroßes Display, und die Zahl 3 steht für die Anzahl an Grid-Spalten, die ich von bootstrap quasi übernommen habe für meinen Artikel. Das Einzige, worauf ich achten muss, ist, dass insgesamt diese Anzahl der verwendeten Spalten 12 ergeben sollte, denn Bootstrap ist auf einem Grid-System aufgebaut, das aus diesen zwölf Spalten besteht, Grid-Spalten. Die habe ich jetzt aufgeteilt auf meine Artikel. Im Moment sehr gleichmäßig, d. h., ich habe vier gleich große Spalten, aber ich kann das Ganze auch ändern. Ich kann zum Beispiel sagen, dass ich nur zwei Spalten für das "Über mich" verwenden möchte und vier Spalten für meinen ersten Artikel, vier Spalten für meinen zweiten Artikel und dafür nur zwei Spalten für die Ausstattungsliste. Mit STRG+S speichere ich das Ganze, und sehe mir nun die Veränderungen an. Und da merken Sie, das geht sehr schnell. Ich habe einfach nur an den Zahlen etwas geändert und habe hier in der Mitte mehr Raum für meine Artikel und am Rand für diese Zusatzinformationen. Damit es zu dieser unterschiedlichen Ansicht kommen kann, habe ich den beiden Spalten am Rand eine eigene Klasse mitgegeben, und zwar die Klasse "panel panel-default". Und damit ich diese abgegrenzten Überschriftsbereiche habe, gibt es auch noch eine eigene Klasse "panel-heading". Dazu habe ich jetzt selbst noch kein Stückchen CSS verwenden müssen, sondern das wohnt, so wie es ist, bereits in bootstrap, und ich kann es einfach verwenden. D. h., es ist sehr leicht, wenn man das Auge auf die Zahl 12 wirft, Spalten zu erzeugen. Diese Spalten haben auch ohne große Vorarbeit den Vorteil, dass Sie schrumpffähig sind, d. h., wenn ich hier die Größe meiner Seite verändere, dann werden ab einem gewissen Zeitpunkt die Artikel untereinander dargestellt und nicht mehr nebeneinander. Das ist einer der massivsten Vorteile von bootstrap und macht es eben sehr einfach, mit einem Spaltenlayout zu arbeiten.

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!