#2144 Erlebniswelten mit Bootstrap CSS-Klassen optimieren

Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap.


In diesem Tutorial findest du eine Übersicht über der wichtigsten Bootstrap CSS-Klassen, welche du in deinen Erlebniswelten nutzen kannst. Diese Klassen kannst du für Sektionen und Blöcke deiner Erlebniswelten nutzen.


Weitere Informationen:

  • Ergänzend empfehlen wir dir unsere Bootstrap-Beispiele in unseren Demoshops. Die Beispiel-Seite ist in jeder Demo über "...themeware.shop/Service/Bootstrap-Beispiele/" aufrufbar (z.B. https://modern.themeware.shop/Service/Bootstrap-Beispiele/) und zusätzlich im Footer der Demoshops verlinkt.
  • Für weitere Informationen zum Thema "Erlebniswelten" empfehlen wir dir einen Blick in den Abschnitt "Weiterführende Links" unterhalb dieses Artikels. 


Inhaltsverzeichnis


Einleitung

Wie du CSS-Klassen für Sektionen und Blöcke im Erlebniswelt-Editor über das Feld "CSS-Klassen" hinzufügen kannst erfährst du in der Shopware-Dokumentation "Erlebniswelten" und in unserem Video "Startseite (ThemeWare® Erlebniswelt) einrichten" (Links siehe unten).



Text

Zum ausrichten von Texten liefert dir Bootstrap bereits einige CSS-Klassen welche du nutzen kannst.



Codebeispiel:

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Mehr Beispiele findest du in unseren Demoshops (z.B. https://modern.themeware.shop/Service/Bootstrap-Beispiele/)


Textfarben

Zum einfärben von Texten liefert Bootstrap bereits einige Klassen für verschiedene Farben mit. Nachfolgend findest du Beispiele für die verfügbaren Farb-Varianten.



Codebeispiel:

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

Mehr Beispiele findest du in unseren Demoshops (z.B. https://modern.themeware.shop/Service/Bootstrap-Beispiele/)



Hintergrund-Farben

Das Bootstrap-Framework liefert dir auch Klassen zum einfärben von Hintergründen von Erlebniswelt-Elementen in verschiedenen Farben mit. Für dunkle Hintergründe empfiehlt es sich eine helle Textfarbe zu wählen (siehe oben).



Codebeispiel:

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>

Mehr Beispiele findest du in unseren Demoshops (z.B. https://modern.themeware.shop/Service/Bootstrap-Beispiele/)



Rahmen

Über Bootstrap-Klassen können auch die Rahmen von Erlebniswelt-Elementen definiert werden. Die Klasse "border-0" entfernt beispielsweise Rahmen von Elementen.



Codebeispiel:

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
<span class="border-0"></span>

Mehr Beispiele findest du in unseren Demoshops (z.B. https://modern.themeware.shop/Service/Bootstrap-Beispiele/)



Abstände

Mit folgenden Bootstrap-Klassen können Abstände für Erlebniswelt-Elemente definiert werden. Es gibt Abstandsklassen auch für verschiedene Viewports.


Die Klassen werden nach dem Format {Eigenschaft}{Seiten}-{Größe} für xs und {Eigenschaft}{Seiten}-{Breakpoint}-{Größe} für sm, md, lg und xl benannt.


Eigenschaft:

  • m - margin (Außenabstand)
  • p - padding (Innenabstand)


Seiten:

  • t - top
  • b - bottom
  • l - left
  • r - right
  • x - sowohl *-left als auch *-right
  • y - sowohl *-top als auch *-bottom
  • ohne - alle 4 Seiten


Breakpoint:

  • sm - ab 576px
  • md - ab 768px
  • lg - ab 992px
  • xl - ab 1200px
  • ohne - ab 0px


Größe: ($spacer = 1rem)

  • 0 - Abstand auf 0 setzen
  • 1 - Abstand auf $spacer * .25 setzen
  • 2 - Abstand auf $spacer * .5 setzen
  • 3 - Abstand $spacer setzen
  • 4 - Abstand $spacer * 1,5 setzen
  • 5 - Abstand $spacer * 3 setzen
  • auto - Abstand 'auto' setzen

Hinweis: ThemeWare® bietet dir darüber hinaus eine ausführlichere Sammlung an Abstandsklassen auf Pixel-Basis. Mehr dazu findest du in unserem Artikel "CSS-Klassen Bibliothek für CMS Erlebniswelten" (Link siehe unten).


Weiterführende Links:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

d4e9a6a7456a15c77d966bb650b6e73b
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

SpeichernCookie-EinstellungenAkzeptieren und Schließen