Bootstrap 3 Grundkurs

Spalten setzen – So funktioniert's!

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Es ist sehr einfach, innerhalb von Bootstrap mit dem Spaltenlayout zu arbeiten. Das zugrundeliegende Prinzip einfach und intuitiv zu erfassen.
07:34

Transkript

Da Bootstrap in seinem grundsätzlichem layout mit Spalten arbeitet, ist es jetzt höchste Zeit, dass wir uns anschauen wie wir diese Spalten überhaupt einsetzen können. Und prinzipiell finden Sie auf der Bootstrap Seite selber, unter dem Menüpunkt CSS, im Bereich Grid system, alle Einstellungsmöglichkeiten ganz gut beschrieben. Ich halt's jetzt aber für praktischer, wenn wir's einfach direkt ausprobieren. Das heißt, ich wechsele in mein Aptana Studio. Da habe ich mir schon ein Projekt angelegt mit Boot1 und da legen die 3 klassischen Folder von Bootstrap drinen und eine Index-Datei habe ich mir zusammen geklaut, mehr oder weniger aus der Bootstrap Seite, nämlich dieses grundsätzliche layout. Und diese Index-Seite werde ich mir jetzt kopieren, indem ich sage File Save As und das nenne ich jetzt spalten.html und mit diesem spalten.html werde ich jetzt meine ersten Gehversuche machen, im Erstellen von Spalten und dabei werden uns auch grundsätzlich die mal anschauen, wie die Seitenstruktur aufgebaut werden kann. Also Spalten wird das ganze heißen und es ist so, dass ich um alles was ich tue herum, auf jeden Fall ein umfassendes div haben möchte und das div hat eine vorgegebene Klasse in Bootstrap, nämlich Container. Das ist sowas wie ein wrap Falter, eben um das ganze herum und so. Das werde ich mir jetzt um alles herumliegen. Ich hab' nur versucht jetzt diese h1 Überschrift innerhalb meines Containers zu platzieren. Und damit ich den Überblick nicht verliere, mache ich mir immer am Ende von diesen einzelnen Containern Hinweise, also das ist jetzt ende container. Denn, wenn die Seite groß und unübersichtlich werden sollte, werde ich dann nicht wahnsinnig, wenn ich mir die einzelnen Abteilungen anschauen soll. So, die Hauptüberschrift haben wir und jetzt kommt ein Bereich den ich wieder vorerst mit einem div eingrenze und einer speziellen Klasse, nämlich jetzt sage ich, dass ich es eben mit einer Reihe zu tun haben werde. Und auch diese werde ich jetzt einfach vorerst wieder schließen und setze mal hier vorsichtshalber wieder ein Ende, sagen wir gleich ende row, und jetzt kommen meine Spalten. Ich möchte gerne 2 Spalten haben. Ich möchte eine schmale Spalte auf der linken Seite haben, wo so Nebensächtligkeiten drin stehen, wie kurze Hinweise, Artikelchen, aber ich möchte eine große Spalte auf der rechten Seite haben, wo dann die Hauptartikeln drin stehen. Und wie man jetzt dem System sagt, wie die Spalten gebaut werden sollen, ist relativ klar vorgegeben. Ich mach' also mal für's erste wieder ein div und setze den div in eine Klasse, und diese Klasse fängt jetzt damit an, dass ich sage es wird eine Spalte, also col. Und jetzt zeige ich was für eine Spalte es werden soll. Welche Art von Spalte. Also, col-, jetzt gebe ich das Ausgabe-Medium an. Klassischerweise ist es Medium für einen normal großen Bildschirm und jetzt ausgehend von einer Gesamtanzahl von 12 Spalten, möchte ich ganz gerne, dass das linke, schmale Teil eben 3 Spalten dick wird oder groß wird. Das ist meine prinzipielle Geschichte und da hinein setze ich jetzt mal eine h2 mit Nebenspalte und in die Nebenspalte hinein vielleicht noch ein bisschen Text. Also einen Paragraphen. Und weil ich ein schreibfauler Mensch bin, habe ich mir einen Blindtextgenerator gesucht. Hole mir irgendeinen Text, beziehe mich auf die Anzahl der Wörter, ich glaube mit 100 Wörter laufe ich ganz gut und mit Steuerung C kopiere ich mir das ganze jetzt und mit Steuerung V füge ich mir das ganze in meiner Aptana Geschichte wieder ein. Nachdem hier dir Formatierung jetzt etwas unübersichtlich ist, klicke ich mit der rechten Maustaste in den Text hinein und kann hier Word Wrap wählen und damit ist das ganze etwas besser lesbar. So, das war mal die linke Spalte. Jetzt möchte ich aber noch eine rechte Spalte haben. Also wieder div und dieses div hat die Klasse col. Es ist ja wieder eine Spalte aber dieses mal ist es eine col-md. Und jetzt brauche ich die Differenz zu 12, also 9. Dieses soll jetzt insgesamt 9 Spalten dick werden und da hinein baue ich mir jetzt wieder eine h2. Das ist Hauptteil und auch hier werde ich etwas Blindtext einfügen. Den habe ich noch in meiner Zwischenablage, also mit Steuerung V kann ich den nochmal einfügen. So, wir haben jetzt unsere ersten 2 Spalten. Wenn das so funktioniert wie ich mir das vorstelle, müsste jetzt links eine schmale Spalte sein und rechts eine breite Spalte. Ich speicher das ganze und sehe es mir mal an. Die Spalten haben soweit funktioniert, ich kann nur gleich auf den ersten Blick erkennen, dass ich hier eine Kleinigkeit übersehen habe. Ich habe vergessen meinen Kodierung Style der Seite mitzuteilen. Bootstrap selber hat diese Bedürfnis ja nicht, weil Englisch nicht wirklich über Sonderzeichen verfügt. Das ist aber nicht wirklich eine Affäre, sondern ich werde gleich ziemlich weit oben neuen meta tag einfügen. Einen meta tag und dieser meta tag besteht aus dem charset. charset= und da gehe ich mir jetzt UTF-8 suchen. Da haben wir's schon. Und das war's eigentlich. Wenn ich das jetzt wieder abspeichere mit Steuerung S und die Seite neuerlich anschaue, dann bin ich die hässlichen Zeichen los und alle Umlaute sind so da wie's sein sollte. Sie sehen also, es ist überhaupt keine Affäre, mit Hilfe dieser Spalten einmal so prinzipielle Einteilungen zu treffen und das ist eigentlich dann auch sehr schnell erledigt. Das ist für Sie nicht viel Arbeit. Sie müssen jetzt nicht selber im CSS noch lang und breit beschließen wie groß, wie breit, wie zahlreich diese Spalten werden sollen, sondern mit dieser prinzipiellen Angabe mit dem col, sind Sie sehr schnell in die Lage versetzt sich um andere Dinge auf Ihrer Web Seite zu kümmern aber nicht mehr um diese Gestaltungselemente.

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)
Feedback / Bewertung
Florian B.

Bootstrap 3 – Crashkurs: Hab mir jetzt alle Videos angesehen, um folgendes Feedback abzugeben. Pro: + Angenehme Stimme der Dozentin + Aussprache Tempo + Einfach erklärt Kontra: - Sehr oberflächlich erklärt - Ständiger Verweis auf offizielle Bootstrap Dokumentation - "Copy and Paste" ohne detaillierte Erklärung zum Code Für mich war der Kurs, dank der angenehmen Stimme und dem Aussprache Tempo, sehr gut mitzuverfolgen. Jedoch sind die im Kurs enthaltenen Kapitel sehr oberflächlich und detaillierte Informationen fehlen, wie z.B. beim erstellen eines Menüs. Das man Menüpunkte als "active" setzen kann ist sicherlich keine Schwierigkeit, jedoch in jedes HTML File denn Menü Code zu kopieren und bei der jeweiligen Seite denn Menüpunkt auf "active" zu setzen ist bestimmt die falsche Vorgehensweise. Da der Code ansonsten doppelt, oder noch öfter an mehreren Stellen gepflegt werden muss. Für jemanden der noch nichts mit Bootstrap gemacht hat, ist dieser Kurs bestimmt hilfreich, doch wenn man sich die Bootstrap Dokumentation genauer unter die Lupe nimmt, wird man feststellen das dort alles vorhanden ist was man benötigt. Fazit: Guter Kurs, jedoch ist die Bootstrap Dokumentation sehr gut ausgereift, da auch die Dozentin in fast jedem Video darauf verweist. Für Komplett Einsteiger sehr empfehlenswert.

 

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!