Bootstrap Mitarbeiterschulung - Logoform

Liebe Logoformies,

Bootstrap ist ein sehr mächtiges Framework für die Darstellung von responsiven Internet-Inhalten. Dabei stellt Bootstrap nicht nur ein Raster für die Seite zur Verfügung sondern via Bootstrap lassen sich nahezu alle erdenklichen Inhalte einer modernen Internetseite (ansichtsoptimiert) darstellen.

^{Diese Spalte hat einen Bootstrap Faktor von
md-4, sm-6, xs-12}

Ein paar Beispiel hierfür wären:

Responsive Navigationen
Tabellen
Formularelemente
Buttons
Dynamische Textgrößen (abhängig vom Endgerät)
und vieles mehr

^{Diese Spalte hat einen Bootstrap Faktor von
md-4, sm-6, xs-12}

Unter diesem Link (Bootstrap API) könnt ihr euch anschauen, was Bootstrap noch so alles drauf hat.

Alle Bereiche, die ihr hier auf der Seite seht, sind mit reinem Bootstrap (fast -ohne jegliche individuelle StyleSheet) erzeugt.

^{Diese Spalte hat einen Bootstrap Faktor von
md-4, sm-12, xs-12}

Warum Bootstrap?

^{Diese Spalte hat einen Bootstrap Faktor von
md-4, sm-3, xs-12}

Abhängig vom übrigen Funktionsumfang einer responsiven Webseite, kann das blöde CSS-Gefummel schnell mal bis zu 60% der Programmierzeit beanspruchen.
Das liegt zum einen daran, dass jeder Browser die Styles teilweise anders interpretiert – zum anderen daran, dass der Programmierer eure Entwürfe erst vermessen und anschließend berechnen muss. Zum Beispiel: Mit welchem prozentualem Verhältnis welches Element -in den diversen Formaten- dargestellt werden soll.
Wenn ihr das Bootstrap-Grid beim Design berücksichtigt und euch auch sonst -soweit wie möglich- an Elementen des Bootstrap-Frameworks „entlanghangelt“, dann könnte man die Zeit, die der Programmierer für die Umsetzung eueres Designs benötigt, um bis zu 40% verkürzen.

^{Diese Spalte hat einen Bootstrap Faktor von
md-8, sm-9, xs-12}

Das Bootstrap Raster

Eine der primären Eigenschaften von Bootstrap ist das Bootsrap-Grid. Ein spaltenbasiertes Raster, dass sich dem jeweiligen Client (Bildschirmgröße) anpasst. Dabei kann der Designer bestimmen was mit den Seitenelementen geschehen soll, wenn die Bildschirmgröße nicht mehr ausreicht um z.B. alle Elemente der Seite nebeneinander darzustellen.

Das Bootstrap-Grid stellt dem Gestalter verschiedene Breakpoints [Sprünge, bei denen sich das Layout der Seite verändert] Abhängig von der Bildschirmgröße zur Verfügung.

^{Diese Spalte hat einen Bootstrap Faktor von
md-4, sm-12, xs-12}

Diese Breakpoints wären:

Breakpoint	Bildschrim-Breite	Gerät
xl	1140px	Desktop
lg	960px	Notebooks \| Tablets (landscape)
md	720px	Tablets (portrait) \| Handy (landscape)
sm	540px	Handy (portrait)
-	auto	Fallback

^{Diese Spalte hat einen Bootstrap Faktor von
md-8, sm-12, xs-12}

Photoshop Template

Zwei Photoshop Templates von Alexander Rechsteiner für das Bootstrap-Grid könnt ihr euch hier herunterladen:

^{Diese Spalte hat einen Bootstrap Faktor von
md-6, sm-4, xs-6}

Photoshop Bootstrap4 Raster als Download

^{Diese Spalte hat einen Bootstrap Faktor von
md-6, sm-8, xs-6}

Erklärung des Bootsrap-Grid-Systems anhand des Photoshop-Templates von Alexander Rechsteiner

Für dieses Beispiel verwenden wir die Datei bootstrap-v4-grid-xl-compatible.psd.

Das Bootstrap-Grid besteht aus 12 einzelnen Spalten. Jede dieser Spalten besitzt einen Abstandhalter nach rechts und links („Gutter“ genannt).
Wie ihr sehen könnt, hat Alexander die Spalten (Rosa) mit Hilfslinien versehen und die Gutter (Grau) jeweils zusammengefasst.

Ausschließlich der rosane Bereich (bzw. ein Zusammenschluss mehrerer rosaner Bereiche - s.u.) kann von euch mit Inhalt gefüllt werden.
Bei Zusammenschlüssen mehrerer Spalten (columns) entfallen die übersprungenen Gutter selbstverständlich. Jedoch gehören zu einer Spalte (auch wenn sie 5 columns breit ist) immer zwei Gutter (einer rechts und einer links).

^{Diese Spalte hat einen Bootstrap Faktor von
xl-6, md-12, sm-12, xs-12}

^{Diese Spalte hat einen Bootstrap Faktor von
xl-6, md-12, sm-12, xs-12}

Alexander hat jedem seiner Templates noch ein bis zwei erklärende Boxen hinzugefügt, die euch die Orientierung erleichtern sollen.
Im nachfolgenden Absatz erkläre ich dann wie die Angaben in den Boxen zu verstehen sind.

Wie zu erkennen ist, sind die Templates für die neuste Version des Bootstrap-Frameworks (4) ausgelegt. Die Help-Boxen in diesem Beispiel entstammen der Datei „bootstrap-v4-grid-xl-compatible“ welche das größtmögliche Bootstrap-Format (Container = 1140px xl) darstellt.

^{Diese Spalte hat einen Bootstrap Faktor von
md-6, sm-12, xs-12}

^{Diese Spalte hat einen Bootstrap Faktor von
md-6, sm-12, xs-12}

Erklärung der Bestandteile des Bootstrap-Grids

^{Diese Spalte hat einen Bootstrap Faktor von
md-12}

Canvas

Ist die Breite euerer Photoshop-Datei.
Diese soll die Darstellung auf einem idealen Desktop-Monitor simulieren (1366px breit).
Bedenkt dabei (-so, wie auch bei den anderen Templates-) aber immer, dass es sich um einen „idealen“ Monitor handelt.
Die tatsächliche Breite und Höhe (selbst von großen Monitoren) ist auch immer davon abhängig, unter welchen Umständen ein Browserfenster geöffnet wird.
Ein Beispiel hierfür sind die unterschiedlich breite Scrollbalken der verschiedenen Browser und Betriebssysteme. In der Höhe (hier eine ideale Höhe von 768px) wird die tatsächliche Browseransicht noch durch z.B. das Adressfeld, die Lesezeichenleiste, das Systemmenü und viele andere Faktoren beeinflusst/verringert.

^{Diese Spalte hat einen Bootstrap Faktor von
xl-4, md-6, sm-12, xs-12}

Container

Ein Container umschließt alle Bootstrap-Spalten (Columns) inklusive ihrer Gutter.
Bedenkt dabei also immer, das die Containerbreite (1140 px) auch immer die äußeren Gutter – rechts und links – (jeweils 15 px) einschießt.
Dies gilt im Besondern auch dann, wenn ihr einen 1:12 Column entwerft. Diese hat dann eben nicht die Breite von 1140 px sondern nur eine Breite von 1110 px. Diese ergibt sich aus der Summe aller Container (inkl. ihrer Gutter) abzüglich der beiden (outer) Gutter rechts und links.

^{Diese Spalte hat einen Bootstrap Faktor von
xl-4, md-6, sm-12, xs-12}

Container-Inner

Der Container-Inner wäre im Falle einer 1:12 Column (also einer Spalte die alle Beschreibbaren Bereich und die von ihr überspannten Gutter beinhaltet) die maximal auszunutzende Breite für euern Content.
Aus der alles überspannenden Column und den beiden Guttern (outer-gutter) links und rechts, ergibt sich ein maximal zu befüllender Content-Bereich von 1110 px.

Natürlich ist es auch weiterhin möglich, z.B. Bilder über die gesamte Browserbreite laufen zu lassen, aber diese müssen dann außerhalb des Bootstrap-Grids definiert werden.

^{Diese Spalte hat einen Bootstrap Faktor von
xl-4, md-12, sm-12, xs-12}

Nach den jeweiligen Bootstrap-Breakpoints (xl, lg, md, sm und xs) brechen alle Columns -standardmäßig- von links nach rechts um.
Dies bedeutet (für das obere Beispiel): 4 bricht unter 3 | 3 bricht unter 2 | 2 bricht unter 1.
Seit Bootstrap 4 ist es auch möglich diese Reihenfolge umzukehren. (Das obere Beispiel zeigt diesen Effekt beim Umbruch auf „Einspaltig“: Der Text, rechts neben dem Bild, würde im Normalfall unter das Bild brechen. Dank Umkehrung bricht der Text aber über das Bild um.

^{Diese Spalte hat einen Bootstrap Faktor von
xl-8, md-6, sm-12, xs-12}

Outer Gutter

Die „outer gutter“ (rechts und links vom „container-inner“) sollten möglichst nicht angetastet werden. Sie werden benötigt um Raum für z.B. Scrollbalken zu lassen. Wird ein Container ohne outer gutter definiert, so fließt sein Inhalt eventuell gegen den Browserrand oder unter die Scrollbalken. Dieser Effekt kann ja -z.B. bei Bildern- durchaus erwünscht sein.

Column

Jede Column besitzt einen right-gutter und einen left-gutter. Die Column ist der Ort, an dem Content (Text, Bilder, Grafiken, etc.) definiert bzw. platziert werden. Selbstverständlich ist es auch möglich, mehrere Columns zu einer zusammen zu fassen. Die gutter, die von diesen Zusammenfassungen überspannt werden, entfallen dann.

Column no gutter

Es besteht ebenfalls die Möglichkeit, Columns ohne gutter zu definieren, so dass der gesamte Spalteninhalt von Content belegt werden kann.
Dies stellt aber für den Programmierer einen größeren Aufwand dar, da er nach jedem Breakpoint kontrollieren muss, ob sich die Column gerade am Rand befindet und dann einen Gutter erzwingen muss. Diese Methode hat anschließend wieder einen Einfluss auf den Inhalt, da die Column dann wieder schmaler wird, als vom Designer vorgesehen.

^{Diese Spalte hat einen Bootstrap Faktor von
xl-4, md-12, sm-12, xs-12
Achtung! Hier gibt es noch eine keine Beonderheit: Die Reihenfolge der Spalten wird getauscht,
wenn der Breakpoint die Einspaltigkeit erreicht ist.}

Praxisbeispiele

Nachfolgend sind die einzelnen Elemente folgendermaßen gekennzeichnet:

	Columns mit ungeraden Ordnungszahlen + gutter links und rechts
. . . . . . . . . . . . .	Columns mit ungeraden Ordnungszahlen (ohne gutter) = Befüllbarer Content
	Columns mit geraden Ordnungszahlen + gutter links und rechts
. . . . . . . . . . . . .	Columns mit geraden Ordnungszahlen (ohne gutter) = Befüllbarer Content
12	Zusätzlich sind die Columns noch mit einer Spaltennummerierung bzw. dem Spaltenüberhang nummeriert.

^{Diese Spalte hat einen Bootstrap Faktor von
md-6, sm-6, xs-12}

Diese Spalte ist eigentlich überflüssig. Sie veranschaulicht aber, dass man mit Bootstrap auch den Textumbruch -abhängig von der Media-Größe- ausrichten kann.
Zieht man das Browserfenster kleiner, so ergeben sich (pro BS-Breakpoint) jeweils andere Textausrichtungen.

So ergeben sich -in diesem Beispiel- folgende Ausrichtungen:

xl = linksbündig

lg = zentriert

md = rechtsbündig

sm = linksbündig

Es gäbe auch noch die Möglichkeit, einen Blocksatz zu definieren, dieser ergibt im HTML allerdings wenig Sinn.

^{Diese Spalte hat einen Bootstrap Faktor von
md-6, sm-6, xs-12}

md sm xs = 12/1 Grid

01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

02 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

03 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

04 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

05 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

06 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

07 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

08 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

09 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

md = 12/4 sm = 12/6 xs = 12/12

Column 01 - 04 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Column 05 - 08 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Column 09 - 12 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

md = 12/6 sm = 12/12 Grid

Column 01 - 06 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Column 07 - 12 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Variationen und wilde Konstrukte

Es gibt auch die Möglichkeit, einen (oder mehrere) Columns -abhängig von der Mediengröße- innerhalb des Grids zu verschieben (offset) und diese dann (bei den folgenden Breakpoints) wieder an eine andere Stelle zurück zu schieben bzw. ihre Breite zu ändern. Wichtig dabei ist immer, dass alle Verschiebungen und Breitenänderungen innerhalb des Bootstrap-Grids erfolgen. Das bedeutet, dass alle Einheiten zusammen (Breiten = positiv / offset = negativ) wieder 12 ergeben müssen.

Beispiel unten:

column	xl	lg	md	sm
01-04	3	2	4	3
05-08	3	2 + offset = 5	4	3
09-12	3 + offset = 3	3	4	3
Gesamt	12	12	12	9 Rest = 3

Column 05 - 08
offset-lg 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Column 09 - 12
offset-xl 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Bilder und Grafiken

Ihr könnt Grafiken und Bilder nun bereits in der richtigen Größe und optimiert für den Programmierer abspeichern, denn ihr könnt am Bootstrap-Grid eures Designs ablesen, wie groß/klein die Bilder minimal/maximal werden.

^{Diese Spalte hat einen Bootstrap Faktor von
md-6, sm-6, xs-12}

Ein Beispiel:

Das Bild im Abschnitt „Warum Bootstrap“ wird (aufgrund seiner Bootstrap-Größe von md-4, sm-3, xs-12) nie größer als 768px (Handy hochkant) angezeigt werden. Deshalb reicht auch eine maximale Breite von 768px für dieses Bild vollkommen aus. Wenn dieses Bild (bzw. das Bootstrap-Grid-Element) nie ohne „Gutter“ (Spaltenabstand rechts/links) angezeigt werden soll, dann würde auch eine Bildgröße von 738px ausreichen.

^{Diese Spalte hat einen Bootstrap Faktor von
md-6, sm-6, xs-12}

Nützliche Links

Layouts mit Bootstrap Bootstrap Breakpoints & Spaltenbreiten Bootstrap4 Testsystem Online Tabellen mit Bootstrap Buttons mit Bootstrap

Formulare mit Bootstrap Photoshop Bootstrap4 Grid Dokumentation by Alexander Rechsteiner Photoshop Bootstrap4 Raster als Download Grid Ausrichtung ^{(für Nerds)} Bootstrap4 Spaltenreihenfolge ändern ^{(für Nerds)}