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

Spalten ins Offset "jagen"

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wer statt Spalten etwas "Luft" haben möchte, kann das durch geschickten Einsatz von "offset"-Attributen lösen.
05:44

Transkript

Wunderbar Spalten zu machen scheint jetzt nicht die große Hexerei zu sein. Es stellt sich jetzt eher die Frage was tue ich, wenn ich einen Spaltenbereich nicht belegen möchte. Wie muss ich vorgehen, wenn ich z. B. diese zweite Abteilung von der Nebenspalte loswerden möchte, wenn ich hier gar nichts stehen haben möchte. Und auch dafür gibt es eine sehr eigentlich simple Lösung und die wollen wir uns gleich anschauen. Ich habe mir eine neue Datei kopiert, die nenne ich jetzt offset und in dieser offset möchte ich eben diese zweite Sektion die ich mir angelegt habe. In dieser zweiten Sektion lösche ich mir den aside Bereich weg, den brauche ich jetzt nicht mehr. Der war 3 Spalten breit und das einzige was ich jetzt tun muss ist, dass ich der nachfolgenden Spalte so zu sagen offset mitgeben muss, also ich schicke 3 Spalten ins offset und es reicht völlig, wenn ich dafür in diesen Artikelbereich ein zweites Attribut setze, also ich sage wieder col-md- und jetzt kommt offset- der Anzahl an Spalten die ich ins offset jagen möchte. Mit Steuerung S speicher ich das und sehe es mir an. Und es hat gleich auf Anhieb funktioniert. D. h. genau diese 3 gedachten Spalten hier sind jetzt im offset gelandet und mein Hauptteil beginnt hier. Ich kann jetzt sogar noch einen Schritt weitertreiben, ich könnte jetzt genauso sagen ich möchte gerne diesen Hauptteil 1 los werden und es soll nur dieser Hauptteil mit dieser Position hier überbleiben und auch da ist es so, dass ich jetzt mal diesen Bereich auf die schnelle unsichtbar machen werde, indem ich ihn auskommentiere und hier dafür das Attribut erweitere. Wieder auf col-md-offset-7, damit die Gesamtzahl eben wieder 12 ergibt und ich speichere das ganze. Erneuere mir meine Ansicht mit F5 und jetzt hat wieder das ganz wunderbar funktioniert. Wir haben jetzt hier diese ganze Anzahl an Spalten weg und dafür in diesem letzten Bereich den Hauptteil. Was ist aber, wenn ich stattdessen, schauen wir's uns hier an, den Hauptteil 1 behalten möchte und den Hauptteil 2 loswerden möchte. Das ist denkbar einfach. Nämlich ich kommentiere jetzt hier meinen einen Artikel wieder weg, hier auch, sonst wird's angezeigt, und stattdessen kommentiere ich einfach nur diesen zweiten Hauptteil aus. Bereiche die nämlich auf der rechten Seite nicht in Anspruch genommen werden, ich speichere es mit Steuerung S. Und schaue es mir wieder an. Mt F5 aktualisiere ich die Seite. Spalten die auf der rechten Seite nicht in Anspruch genommen werden, verfallen einfach und bleiben frei. Das ist also ein ziemlich einfaches Prinzip mit der Flexibilität des offset Modus arbeiten zu können. Zum Abschluss machen wir jetzt noch auf dieser Seite vielleicht eine kleine Fußnote, um das ganze nochmal zu wiederholen. D. h. hier fange ich an, dass ich sage ich möchte gerne einen footer haben. Der bekommt die class row. Und in diesem footer möchte ich jetzt ein div haben. Und in diesem div wird dann letztendlich nur das copyright stehen, aber ich werde dem ganzen ein col geben, col-md und ich möchte das mein copyright Hinweis so ziemlich weit rechts liegt, d. h. der wird nicht groß sein, der soll nur 2 Spalten breit werden, aber ich möchte col-md-offset-10 Spalten Freiraum haben. Ich merke jetzt gerade, dass ich hier das = Zeichen vergessen habe, nichts ist leichter als das nachzurüsten. Ok. Und da hinein schreibe ich jetzt nur den copyright Hinweis von video2brain. Steuerung S speichert das ganze. Ich sehe es mir an und hier unten sehen Sie jetzt in meinem footer Bereich ziemlich gut auf der rechten Seite mein copyright Hinweis. D. h. auch hier wieder mit jeder neuen row schaffen Sie neue Möglichkeiten und mit der Technik etwas ins offset zu setzen, schaffen Sie auch ganz gute Positionierungen innerhalb dieser Reihenaufteilung.

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!