Redaktioneller Leitfaden
Für Bootstrap-Helferklassen

Einführung

Dieser redaktionelle Leitfaden richtet sich an Redakteure bei C|MICHAEL Webentwicklung, die das HTML-Framework Bootstrap zur Gestaltung der Webseiten nutzen. Da alle Webseiten von C|MICHAEL auf Bootstrap basieren, bietet dieser Leitfaden eine klare Struktur und ein verständliches Vorgehen, um Bootstrap-Helferklassen (Utility-Klassen) korrekt anzuwenden. Mit diesen Klassen können Redakteure das Layout und die Darstellung der Seiten schnell und unkompliziert anpassen, ohne tiefere Programmierkenntnisse haben zu müssen.

Statt das Layout mühsam per Maus zu gestalten, bieten Bootstrap-Klassen eine effektive Möglichkeit, Änderungen über CSS-Klassen direkt umzusetzen. Sobald man sich an diese Methode gewöhnt hat, lässt sich das Layout einer Webseite nicht nur schneller, sondern auch konsistenter und präziser steuern. Der Leitfaden ist daher besonders hilfreich, um die wichtigsten Klassen wie Margin, Padding, Border, Shadow und weitere optimal zu nutzen und die Arbeit mit Bootstrap effizient zu gestalten.

Inhalt

  1. Abstände: Margin und Padding
  2. Schatten-Effekte: shadow
  3. Rahmen (Border)
  4. Abgerundete Ecken: Border-Radius
  5. Flexbox-Helferklassen
  6. Textfarben und Hintergrundfarben
  7. Typografie: Display-Klassen
  8. Textausrichtung
  9. Sichtbarkeit und Anzeigeoptionen

 

1. Abstände: Margin und Padding

Abstände sind entscheidend für das Layout und die Lesbarkeit einer Webseite. Bootstrap bietet für Abstände die Klassenfamilien m (Margin) und p (Padding), die auf verschiedene Seiten eines Elements angewendet werden können.

1.1 Margin-Klassen (m-)

Die Klasse m- wird verwendet, um den Außenabstand (Margin) eines Elements festzulegen. Die Nummer hinter der Klasse gibt den Wert in rem an.

  • m-0: Kein Außenabstand
  • m-1: 0,25rem Abstand (4px)
  • m-2: 0,5rem Abstand (8px)
  • m-3: 1rem Abstand (16px)
  • m-4: 1,5rem Abstand (24px)
  • m-5: 3rem Abstand (48px)
Spezifische Seiten
  • mt-*: Margin oben (Top)
  • mb-*: Margin unten (Bottom)
  • ml-*: Margin links (Left)
  • mr-*: Margin rechts (Right)
  • mx-*: Margin horizontal (Links und Rechts)
  • my-*: Margin vertikal (Oben und Unten)
Beispiele:
  • m-3: 1rem Abstand um das ganze Element
  • mt-2: 0,5rem Abstand oben
  • mx-4: 1,5rem Abstand horizontal

1.2 Padding-Klassen (p-)

Die Klasse p- wird verwendet, um den Innenabstand (Padding) eines Elements festzulegen. Sie folgt denselben Regeln wie die Margin-Klassen.

  • p-0: Kein Innenabstand
  • p-1: 0,25rem Abstand
  • p-2: 0,5rem Abstand
  • p-3: 1rem Abstand
  • p-4: 1,5rem Abstand
  • p-5: 3rem Abstand
Spezifische Seiten
  • pt-*: Padding oben (Top)
  • pb-*: Padding unten (Bottom)
  • pl-*: Padding links (Left)
  • pr-*: Padding rechts (Right)
  • px-*: Padding horizontal (Links und Rechts)
  • py-*: Padding vertikal (Oben und Unten)
Beispiele:
  • p-4: 1,5rem Abstand innen
  • py-3: 1rem vertikaler Innenabstand
  • px-2: 0,5rem horizontaler Innenabstand

2. Schatten-Effekte: shadow

Mit den shadow-Klassen lassen sich Schatteneffekte einfach anwenden, was dem Design mehr Tiefe und Struktur verleiht.

  • shadow-none: Kein Schatten
  • shadow-sm: Kleiner Schatten
  • shadow: Standard-Schatten
  • shadow-lg: Großer Schatten
Beispiele:
  • shadow-sm: Ein kleiner, feiner Schatten, geeignet für dezente Effekte
  • shadow-lg: Ein auffälliger Schatten, der bei hervorgehobenen Elementen verwendet werden kann

3. Rahmen (Border)

Rahmen um Elemente herum helfen, Bereiche abzugrenzen. Die border-Klassen bieten eine einfache Möglichkeit, Rahmen hinzuzufügen.

3.1 Rahmen hinzufügen

  • border: Fügt einen standardmäßigen 1px-Rahmen hinzu
  • border-0: Entfernt alle Rahmen
Spezifische Seiten
  • border-top: Nur Rahmen oben
  • border-bottom: Nur Rahmen unten
  • border-left: Nur Rahmen links
  • border-right: Nur Rahmen rechts

3.2 Rahmenbreite

  • border-width-0 bis border-width-5: Setzt die Breite des Rahmens von 0 bis 5px

3.3 Rahmenfarbe

Rahmenfarben lassen sich mit Standardfarben von Bootstrap festlegen:

  • border-primary: Blauer Rahmen
  • border-secondary: Grauer Rahmen
  • border-success: Grüner Rahmen
  • border-danger: Roter Rahmen
  • border-warning: Gelber Rahmen
  • border-info: Hellblauer Rahmen
  • border-light: Heller Rahmen
  • border-dark: Dunkler Rahmen
Beispiele:
  • border: Standardrahmen um das Element
  • border-0: Entfernt den Rahmen
  • border-primary: Blauer Rahmen

Redaktioneller Leitfaden für Bootstrap-Helferklassen (erweitert)

Einführung
Bootstrap bietet eine Vielzahl an Helferklassen, die das Design und Layout von Webseiten effizient gestalten. Neben den bereits behandelten Abständen, Schatten und Rahmen werden in diesem erweiterten Leitfaden zusätzliche wichtige Klassen wie border-radius, Flexbox-Utilities (d-flex, justify-content-*, align-items-*), Typografie-Utilities (z.B. display-*) und mehr beschrieben.

1. Abgerundete Ecken: Border-Radius

Die border-radius-Klassen von Bootstrap bieten eine einfache Möglichkeit, Elemente mit abgerundeten Ecken zu versehen.

  • rounded: Generelle Abrundung
  • rounded-top: Abrundung nur oben
  • rounded-bottom: Abrundung nur unten
  • rounded-left: Abrundung nur links
  • rounded-right: Abrundung nur rechts
  • rounded-circle: Vollständiger Kreis (für quadratische Elemente)
  • rounded-pill: Pille-Form (längliche Abrundung)

Beispiele:

  • rounded: Standardmäßige Abrundung an allen Ecken
  • rounded-circle: Macht ein quadratisches Element rund
  • rounded-top: Nur die oberen Ecken sind abgerundet

2. Flexbox-Helferklassen

Bootstrap nutzt Flexbox zur einfachen Anordnung von Elementen innerhalb eines Containers. Diese Flexbox-Klassen helfen, Elemente in einem flexiblen Layout korrekt auszurichten.

2.1 Flex-Container

  • d-flex: Macht ein Element zu einem Flex-Container
  • d-inline-flex: Macht ein Element zu einem Inline-Flex-Container
Beispiel:
  • d-flex: Erstellt einen Flex-Container, in dem die Kinder-Elemente flexibel angeordnet werden

2.2 Ausrichtung entlang der Hauptachse (Horizontal)

Mit den Klassen justify-content-* lässt sich der Inhalt entlang der Hauptachse (normalerweise horizontal) ausrichten:

  • justify-content-start: Links ausgerichtet (Standard)
  • justify-content-center: Zentriert
  • justify-content-end: Rechts ausgerichtet
  • justify-content-around: Gleiche Abstände zwischen den Elementen, Ränder etwas größer
  • justify-content-between: Maximale Verteilung mit gleichmäßigem Abstand dazwischen
  • justify-content-evenly: Gleichmäßiger Abstand, auch an den Rändern
Beispiele:
  • d-flex justify-content-center: Zentriert den Inhalt innerhalb des Flex-Containers
  • d-flex justify-content-between: Maximale Verteilung der Elemente über den gesamten verfügbaren Raum

2.3 Ausrichtung entlang der Querachse (Vertikal)

Mit den Klassen align-items-* lässt sich die vertikale Ausrichtung der Flexbox-Elemente steuern:

  • align-items-start: Elemente werden am oberen Rand ausgerichtet
  • align-items-center: Elemente werden vertikal zentriert
  • align-items-end: Elemente werden am unteren Rand ausgerichtet
  • align-items-baseline: Elemente werden entlang ihrer Text-Baseline ausgerichtet
  • align-items-stretch: Elemente strecken sich, um die Höhe des Containers zu füllen (Standard)
Beispiele:
  • d-flex align-items-center: Zentriert den Inhalt vertikal
  • d-flex align-items-end: Ordnet die Elemente am unteren Rand des Containers an

2.4 Flex-Richtung

Mit den Klassen flex-row und flex-column kann die Ausrichtung von Flexbox-Elementen horizontal oder vertikal gesteuert werden:

  • flex-row: Horizontale Ausrichtung der Elemente (Standard)
  • flex-column: Vertikale Ausrichtung der Elemente
  • flex-row-reverse: Umkehrung der horizontalen Ausrichtung
  • flex-column-reverse: Umkehrung der vertikalen Ausrichtung
Beispiel:
  • d-flex flex-column: Richtet die Flexbox-Elemente vertikal aus

3. Typografie: Display-Klassen

Mit den display-*-Klassen lassen sich Schriftgrößen und Gewichtung für Überschriften und große Textblöcke steuern.

  • display-1: Größte Schriftgröße (ca. 6rem)
  • display-2: Sehr große Schriftgröße (ca. 5.5rem)
  • display-3: Große Schriftgröße (ca. 4.5rem)
  • display-4: Mittlere Schriftgröße (ca. 3.5rem)
  • display-5: Kleine große Schriftgröße (ca. 2.5rem)
  • display-6: Kleinste Schriftgröße (ca. 1.5rem)
Beispiel:
  • display-1: Sehr große Überschrift, geeignet für große Titel oder Slogans
  • display-4: Mittelgroße Überschrift für weniger hervorgehobene Bereiche

4. Weitere nützliche Helferklassen

4.1 Textfarben und Hintergrundfarben

Bootstrap bietet Helferklassen, um Farben schnell und einfach anzuwenden.

  • Textfarben:

    • text-primary: Primäre Textfarbe (meist Blau)
    • text-secondary: Sekundäre Textfarbe (meist Grau)
    • text-success: Grün (für Erfolgsmeldungen)
    • text-danger: Rot (für Fehlermeldungen)
    • text-warning: Gelb (für Warnungen)
    • text-info: Hellblau (für Informationshinweise)
    • text-dark: Dunkle Textfarbe
    • text-light: Helle Textfarbe

  • Hintergrundfarben:

    • bg-primary: Blauer Hintergrund
    • bg-secondary: Grauer Hintergrund
    • bg-success: Grüner Hintergrund
    • bg-danger: Roter Hintergrund
    • bg-warning: Gelber Hintergrund
    • bg-info: Hellblauer Hintergrund
    • bg-dark: Dunkler Hintergrund
    • bg-light: Heller Hintergrund
Beispiele:
  • text-success: Grüner Text für Erfolgsmeldungen
  • bg-danger: Roter Hintergrund für wichtige Warnhinweise

4.2 Textausrichtung

Um die Textausrichtung zu steuern, können folgende Klassen verwendet werden:

  • text-left: Text linksbündig
  • text-center: Text zentriert
  • text-right: Text rechtsbündig
Beispiel:
  • text-center: Zentriert den Text innerhalb eines Containers

4.3 Sichtbarkeit und Anzeigeoptionen

Mit den Klassen der d- Familie lässt sich die Sichtbarkeit von Elementen steuern.

  • d-none: Element wird ausgeblendet
  • d-block: Element wird als Block angezeigt
  • d-inline: Element wird inline angezeigt
  • d-inline-block: Element wird als Inline-Block angezeigt
Beispiel:
  • d-none d-md-block: Versteckt das Element auf kleinen Geräten, zeigt es aber auf mittelgroßen und größeren Geräten an

Fazit

Dieser erweiterte Leitfaden bietet eine umfassende Übersicht der wichtigsten Bootstrap-Helferklassen, die für Abstände, Flexbox, Typografie, Farben, Ausrichtung und mehr verwendet werden. Die richtige und konsistente Anwendung dieser Klassen trägt zu einem strukturierten und ansprechenden Webdesign bei.