Text & Medien
Beispielseite zu Text & Medien – alle Kombinationen aus Bildposition und Textfluss auf einen Blick.
Das Standardelement mit allen Bildpositionen – darüber, darunter, im Text, neben dem Text – und den t3sbootstrap-Erweiterungen für Seitenverhältnis und Spaltenbreite.
GrundlagenGestaltung#Tag 3
Image Gallery
Beispielseite zu den Bildergalerien – unterschiedliche Raster, Vergrößerung im Überlagerungsfenster und Umgang mit gemischten Seitenverhältnissen.
Die Bootstrap-Galerie verteilt Bilder auf Spalten und kann sie in einer Lightbox öffnen. Die Bildhöhen unterscheiden sich hier bewusst – quer, hoch und quadratisch gemischt.
Gestaltung#Tag 3
Tabellen
Beispielseite zu Tabellen – Varianten der Darstellung und die Frage, wie breite Tabellen auf dem Telefon bedienbar bleiben.
Das Tabellen-Element bringt Bootstraps Tabellenklassen mit – gestreift, mit Rahmen, kompakt, dunkel, responsiv.
Layout#Tag 1#Tag 3
Background Wrapper
Beispielseite zum Background Wrapper: Hintergrundfarben und -bilder für ganze Abschnitte, mit Abständen und Randverläufen.
Der Background Wrapper legt Bild, Video oder Farbe hinter beliebigen Inhalt. Hier stecken die meisten Fixes von heute: Klasse und Style des Wrappers, playsinline auf dem Video, die mobile Höhe und die…
LayoutGestaltung#Tag 1#Tag 3
Parallax Wrapper
Beispielseite zum Parallax-Effekt, samt Hinweis auf prefers-reduced-motion und die Wirkung auf die Ladezeit.
Der Parallax Wrapper bewegt sein Hintergrundmedium langsamer als die Seite. Geschwindigkeit, Zusatzhöhe und das Abschalten auf Mobilgeräten sind einstellbar.
GestaltungInteraktion#Tag 3
Background Image
Beispielseite zum Hintergrundbild – mit dem wichtigsten Punkt: genug Kontrast, damit der Text auf dem Bild lesbar bleibt.
Hintergrundbilder werden als CSS erzeugt, nicht als <img>. Die Extension legt dafür Regeln für jede Bildschirmbreite an.
Gestaltung#Tag 3
List Group & Masonry
Beispielseite zu List Group und Masonry – wann eine Liste die bessere Wahl ist und wann ein Kachelraster.
Zwei Wrapper, die ihre Kinder besonders anordnen: die List Group als Liste, Masonry als versetztes Raster mit unterschiedlich hohen Kacheln.
LayoutInteraktion#Tag 1#Tag 2