Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Typografie Teil 2 | Grundkonzepte
Bootstrap-Grundlagen für Moderne Websites

book
Typografie Teil 2

Textfarbe

Bootstrap bietet eine Reihe von Dienstprogrammen-Klassen, um vordefinierte Textfarben auf Elemente anzuwenden.

  • text-primary: Setzt die Textfarbe auf eine Primärfarbe, typischerweise ein Blauton;

  • text-secondary: Setzt die Textfarbe auf eine Sekundärfarbe, oft ein Grauton;

  • text-success: Setzt die Textfarbe, um Erfolg anzuzeigen, typischerweise ein Grünton;

  • text-danger: Setzt die Textfarbe, um Gefahr oder Fehler anzuzeigen, oft ein Rotton;

  • text-warning: Setzt die Textfarbe, um eine Warnung anzuzeigen, normalerweise ein Gelbton;

  • text-info: Setzt die Textfarbe, um Informationen zu vermitteln, oft ein Cyan- oder Tealton;

  • text-light: Setzt die Textfarbe auf einen helleren Ton, typischerweise hellgrau oder weiß;

  • text-dark: Setzt die Textfarbe auf einen dunkleren Ton, typischerweise dunkelgrau oder schwarz;

  • text-muted: Setzt die Textfarbe auf einen gedämpften oder abgeschwächten Ton, oft ein hellgrau, um anzuzeigen, dass der Text weniger wichtig oder deaktiviert ist.

Diese Klassen können auf Elemente wie <p>, <span>, <div>, <h> usw. angewendet werden.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Typography Part 2 Example 1</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="row">
<div class="col">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
</div>
<div class="col">
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
</div>
<div class="col">
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Texttransformation

Klassen wie text-uppercase, text-lowercase, und text-capitalize transformieren den Text.

  • text-uppercase: Wandelt den Text in Großbuchstaben um;

  • text-lowercase: Wandelt den Text in Kleinbuchstaben um;

  • text-capitalize: Kapitalisiert den ersten Buchstaben jedes Wortes im Text.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Typography Part 2 Example 2</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<p class="text-uppercase">uPpErCaSe TeXt</p>
<p class="text-lowercase">LoWeRcAsE tExT</p>
<p class="text-capitalize">capitalize first letter</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Textdekoration

Klassen wie text-decoration-underline, text-decoration-line-through und text-decoration-none werden verwendet, um Text zu dekorieren.

  • text-decoration-underline: Fügt dem Text eine Unterstreichung hinzu;

  • text-decoration-line-through: Fügt dem Text eine Durchstreichung hinzu;

  • text-decoration-none: Entfernt alle Textdekorationen.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Typography Part 2 Example 3</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Text with a line through</p>
<a class="text-decoration-none">
Anchor tag with underline by default. Removed using
<code>text-decoration-none</code>.
</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 3

Fragen Sie AI

expand
ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

some-alt