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.

WordPress-Themes mit Bootstrap

Grid-System

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Grid-System von Bootstrap teilt eine Seite in zwölf einzelne, gleich große Spalten auf. Dabei können abhängig von der verwendeten Bildschirmgröße mehrere Spalten bei Bedarf zusammengefasst werden.
05:35

Transkript

Ich möchte Ihnen jetzt mal das Grid-System von Bootstrap vorstellen. Bootstrap teilt eine Seite gedanklich in 12 einzelne gleich große Spalten auf, also 1, 2, 3, 4 bis dahinten zu 12. Und wir können aus diesem 12-spaltigen Grid, aus diesem 12-spaltigen Muster quasi, natürlich auch einzelne Zellen zusammenfassen, oder wir können einzelne Zellen verschieben, hin und her. Das zeige ich Ihnen jetzt mal. Ich gehe in den Quelltext und das, was wir gerade gesehen haben, div class, und dann habe ich ein col-md-1, das bedeutet, dass ist eine Spalte, also ein column, das eine Einheit breit sein soll. Wenn ich das Ganze jetzt hier mal wegnehme und etwas Neues reinschreibe, dann habe ich hier ein div-clas=row, also das ist eine Zeile und jetzt schreibe ich hier col-md-4. Das bedeutet es sollen vier Spalten zusammengefasst werden und wenn ich das Ganze jetzt abspeichere und die mir hier draußen anschaue, dann habe ich hier drei gleich große Spalten, die die gesamte Breite ausfüllen. Das ist dieses col und dieses 4. Dieses border, das habe ich jetzt hier nur für dieses Beispiel angefügt, und hier oben habe ich das border definiert, das hat nichts mit Bootstrap zu tun, ich möchte nur hier die einzelnen div container besser sehen, deswegen habe ich hier dieses border eingefügt. Dieses col habe ich Ihnen gerade schon erklärt, das steht für eine Spalte. Das 4 steht dafür, dass 4 einzelne Spalten überbrückt werden sollen, insgesamt wird in dieser Zeile dann hier die 12 erreicht, wenn ich diese drei Vierer zusammenzähle. Und jetzt habe ich hier noch dieses md. Wofür steht dieses md? Dieses md bedeutet, dass auf mittelgroßen Geräten diese 3 Spalten hier angezeigt werden sollen, und wenn ich das Ganze jetzt mal kleiner mache, Sie sehen es hier schon, dann werden diese Spalten die gesamte Breite ausfüllen und erst wenn ich hier über eine bestimmte Größe drüberkomme, dann werden daraus drei Spalten. Ich kann jetzt hier eine zusätzliche Klasse vergeben und kann sagen col-sm für small, das soll zum Beispiel 6 sein, das heißt die Hälfte des verfügbaren Platzes soll verwendet werden. Das gilt für die erste Spalte, für die zweite Spalte gilt das Gleiche, und die dritte Spalte, die soll zum Beispiel die volle Breite von 12 einnehmen. Wenn ich das Ganze jetzt hier mir nochmal neu anschaue, dann hat sich hier zunächst einmal nichts verändert, weil in dieser md Ansicht, in dieser medium Ansicht ist ja noch alles gleichgeblieben, aber passen Sie mal auf, was passiert, wenn ich das Ganze hier kleiner schiebe. Jetzt sind die ersten beiden Spalten halb so groß und die untere ist über die volle Breite. Und hier kann ich natürlich auch verschiedene andere Einstellungen vornehmen, ich kann sagen, ich nehme einen goldenen Schnitt, die erste Spalte soll 8 breit sein, die zweite nur 4. Wenn ich das Ganze jetzt neu starte, dann habe ich in dieser smallen Ansicht, also in dieser kleinen Ansicht, hier eine linke breite Spalte, eine rechte weniger breite, und wenn ich das groß ziehe, dann greift plötzlich wieder hier dieser Bereich md. Ich muss also hier nicht mit verschiedenen JavaScripts oder sowas arbeiten, sondern ich kann in ein und der selben Klasse sagen, wie breit soll denn eine Spalte sein, wenn das ganze Medium breit ist, oder wenn es small breit ist. Schauen wir uns mal an, was es für andere Größenangaben noch gibt. Ich bin jetzt hier auf getbootstrap.com/css. Wenn ich hier oben draufklicke, dann kann ich hier rechts in der Übersicht auf Grid system klicken und dann lande ich eben genau hier. Und dann sehen wir, wir haben für besonders kleine Geräte wie zum Beispiel Smartphones ein col-xs für extra small für alle Geräte, die kleiner als 768px breit sind. Wir haben ein sm für small, das gilt ab 768 bis 992. Da fangen dann die Tablets an beispielsweise, col-md und col-lg für col large. Diese 4 Varianten haben wir und wir können dann eben immer ganz genau angeben, wie breit soll den eine spezielle Spalte auf einem speziellen Gerät sein und das machen wir, indem wir hier einfach eine zusätzliche Klasse vergeben. Sie können hier mal ein bisschen rumprobieren, unter getbootstrap.com gibt es auch jede Menge Beispiele und wir können zum Beispiel auch mit einer Offset Klasse eine Spalte verschieben, also col-md-offset, und jetzt füge ich hier zum Beispiel ein offset ein für die erste Spalte, der Punkt, der kommt hier weg, ich sage dieses offset soll nur für small devices gelten, das soll 2 grids groß sein, da muss ich hier natürlich ein bisschen grid wegnehmen, wenn ich das Ganze mir jetzt hier mal anschaue und neu lade, dann sehen Sie, ist die erste Spalte hier einfach nach rechts reingerückt und in der ganz großen Ansicht sieht es dann entsprechend auch anders aus. Unter getbootstrap.com/css können Sie dann zu grid herunterfahren und Sie können dann eben ganz einfach, in dem Sie verschiedene Klassennamen vergeben, hier Ihre Seite individuell zusammenstellen und das für vier verschiedene Ansichten, xs für sehr kleine Geräte, sm für kleine Geräte, für mittelgroße und für ganz große Geräte.

WordPress-Themes mit Bootstrap

Verwirklichen Sie Ihre eigenen Designvorstellungen bei Ihrem Webauftritt und sehen Sie, wie Sie WordPress-Seiten über Plug-ins und Themes wie z.B. Bootstrap erweitern können.

2 Std. 33 min (39 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!