Neben den CSS-Abstandsklassen von Bootstrap stehen dir mit den ThemeWare® CSS-Abstandsklassen weitere (pixelbasierte) Abstandsklassen zur Verfügung um Abstände in Erlebniswelten zu definieren.
Die ThemeWare® CSS-Abstandsklassen werden nach dem folgenden Muster benannt:
Beim Update von Bootstrap 4 auf Bootstrap 5 (ab Shopware 6.5) wurden einige Klassen umbenannt um logische Eigenschaftennamen anstelle von Richtungsnamen zu verwenden.
Ab Shopware 6.5 hast du in ThemeWare® daher die Möglichkeit zu wählen ob du die alte Bootstrap 4 oder die neue Bootstrap 5 Schreibweise nutzen möchtest:
Nutzt du die alte Schreibweise und möchtest diese nicht überall ändern, lade einfach die CSS-Abstandsklassen für Bootstrap 4. Neue ThemeWare® Installationen laden automatisch die Bootstrap 5 Abstandsklassen.
Nachfolgend findest du den Aufbau für beide Varianten:
Aufbau
Beschreibung
Beispiele
Aufbau
Beschreibung
Beispiele
(default)
t
Seiten:
t => Top (oben)
e => End (rechts)
b => Bottom (unten)
-
Trennzeichen
md
Breakpoint: (optional)
sm => ab 576px
md => ab 768px
lg => ab 992px
-
Trennzeichen
n
Negativer Wert (nur Margin): (optional)
n => Wert wird negativ verwendet (-x Pixel)
Keine Angabe => wird positiv verwendet
2
Größe:
0 => 0 Pixel
1 => 10 Pixel
2 => 20 Pixel
t
Seiten:
t => Top (oben)
r => Right (rechts)
b => Bottom (unten)
-
Trennzeichen
md
Breakpoint: (optional)
sm => ab 576px
md => ab 768px
lg => ab 992px
-
Trennzeichen
n
Negativer Wert (nur Margin): (optional)
n => Wert wird negativ verwendet (-x Pixel)
Keine Angabe => wird positiv verwendet
2
Größe:
0 => 0 Pixel
1 => 10 Pixel
2 => 20 Pixel
// Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Größe} // für xs
// Erweiterte Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Breakpoint}-{Größe} // für sm, md, lg und xl
Links: Standard Abstand | Rechts: Abstandsklasse "twt-mb-5"
ThemeWare® CSS-Abstandsklassen
Beispiel
Bootstrap 4 vs. Bootstrap 5
Bootstrap 5 (Shopware 6.5)
Bootstrap 4 (Shopware 6.4)
Hinweis: Du kannst die ThemeWare® "CSS-Abstandsklassen" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen"".
