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.

Bootstrap 3 Grundkurs

Noch mehr Spalten und HTML5

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sie können den Umgang mit den Spalten individuell anpassen. Mit jeder neuen Reihe dürfen Sie auch neue Spaltenaufteilungen vornehmen. Die semantischen Gliederungsmöglichkeiten von HTML5 verbessern die Lesbarkeit des Codes.
07:33

Transkript

Ich habe hier jetzt eine eigene Seite erstellt, die sich mit den Spalten innerhalb von Bootstrap befasst, und habe hier auch schon meine ersten 2 Spalten angelegt. Das spannende ist aber, dass ich jetzt nicht für den Rest dieser Seite fixiert bin auf diese 2 Spalten, sondern, dass ich jederzeit eine neue row anfangen kann und dort sieht das ganze dann auch gleich ganz anders aus. Ich mache also wieder mal ein div mit der Klasse row und in dieser Version möchte ich jetzt folgendes machen. Ich möchte gerne meinen Hauptartikelteil nochmal unterteilen, so das ich dann 2 Spalten innerhalb des Hauptbereichs nebeneinander haben werde. Hier mache ich vorsichtshalber wieder ein ende row, damit ich mich später noch auskenne und setze jetzt in den Bereich wieder erneut ein div mit der Klasse col. Diese erste Spalte wird gleich bleiben, also es ist eine col-md-3 und die befülle ich jetzt exakt mit dem was ich hier oben schon hatte bis hierher. Steuerung C zum Kopieren und Steuerung V zum Einfügen. Und als nächstes möchte ich jetzt aber eben 2 Spalten nebeneinander haben. D. h. ich habe jetzt dann ein div mit der Klasse col und es ist wieder md und jetzt möchte ich noch haben eine Spalte die eben 4 Spalten breit ist, auch da füge ich jetzt wieder einen Hauptspaltentext ein. Steuerung C. Steuerung V. Und da schreibe ich jetzt aber Hauptteil1 und dasselbe Spiel spiele ich jetzt nochmal mit einem div mit der class=col-md und wenn ich jetzt schon 7 belegt habe, brauche ich jetzt noch 5 Spalten für den Rest. So. Und da werde ich dann aus der Zwischenablage einfach nochmal diesen zweiten Hauptteil einfügen. Und ich speicher das ganze mit Steuerung S und schaue mir das ganze jetzt in Firefox an. Und Sie merken, ich hatte jetzt wieder wenig Aufwand eigentlich um diese neuen Spalten zu erzeugen. Hier habe ich den Bereich der ersten row und hier unten habe ich den Bereich der zweiten row. So und jetzt wird's ganz kurz Zeit, dass wir uns so nebenbei auch einmal ein bisschen mehr um das html selbst kümmern. Ich habe bis jetzt nur mit divs gearbeitet, was sehr unverfänglich ist, aber auch sehr unübersichtlich und immerhin haben wir hier im DOCTYPE demonstriert, dass wir den Anspruch haben html5 zu produzieren. Und in html5 stehen mir ja schon bedeutend mehr Texte zur Verfügung mit denen ich dann arbeiten kann, um auch semantisch etwas klarer zu werden. Und das mache ich hier indem ich anfange die Seiten oder bzw. mal die rows, welche ja größere Abteilungen sind, als Sektionen zu bezeichnen. D. h. statt einem div werde ich hier jetzt eine Section machen und natürlich muss dann am Ende meiner row, also hier auch ein Ende von der Section stattfinden. So, und dasselbe mache ich hier. Hier beginnt wieder eine neue Section und die ist etwas größer. Hier endet meine neue zweite Section. Und innerhalb jeder Section habe ich es mit einem Seitenteil und einen Hauptteil zu tun. Für den Seitenteil habe ich die Möglichkeit, dass ich den tag aside verwende, was ich hiermit auch tun möchte und hier endet aside und für den Hauptteil werde ich article verwenden. D. h. hier beginnt mein article und hier endet mein article. Und das ganze hätte ich hier nochmal, Anfang von meinem article und das Ende von meinem article. Das ganze muss ich jetzt oben auch noch machen. Auch hier habe ich zuerst einen aside der hier endet und hier habe ich dann einen article der hier endet. Diese Aufteilung ändert jetzt letztendlich nichts am Aussehen der Seite. Wenn wir uns das ganze nochmal anschauen. Die Seite sieht genauso aus wie zuvor. Das was sich geändert hat, ist die Lesbarkeit des codes. Denn, wenn Sie sich jetzt anschauen, im Gegensatz zu einem seltsamen, schwer nachvollziehbaren Gemetzel von lauter einzelnen Containern, haben wir's jetzt mit einer semantisch ganz gut bemerkbaren Aufteilung zu tun. Und das ist ja schließlich das Ziel von html5. Html5 ist nur bedingt nach hinten kompatibel einsetzbar, d. h. mit einem Internet Explorer 7 werden Sie da keine besondere Freude haben, doch sogar da gäbe es dann die Möglichkeit mit Hilfe von JavaScript noch die nötigen Schritte zu setzen. Nur hier, jetzt möchte ich Ihnen zeigen wie html5 funktioniert, ist ja auch irgendwie die Zukunft und wenn Sie für eine längere Dauer programmieren wollen, bzw. für eine längere Dauer coden wollen, ist es ganz gut, wenn man sich an diese semantischen Erneuerungen schon einmal gewöhnt. Sie haben jetzt gesehen, dass wir in kurzer Zeit wechseln können zwischen unterschiedlichen Spalten Typen und Spalten Aufteilungen, je nachdem wie das Ihre Seite brauchen kann und Sie bekommen jetzt eine Vorstellung wie gut Sie damit Ihre Seiten strukturieren werden können. Relativ einfach eben mit Hilfe dieses col Systems, das man, wenn man's einmal begriffen hat wie's funktioniert, sehr schnell und intuitiv einsetzen kann.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 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!