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

book
Schaltflächen Teil 1

Bootstrap bietet eine Vielzahl von Button-Stilen und -Größen, die für unterschiedliche Designanforderungen und Situationen verwendet werden können.

Allgemeine Button-Klassen

Grundlegender Button

Die btn-Klasse dient als grundlegende Klasse für die Gestaltung von Buttons. Sie bietet grundlegende Button-Styling, wie Polsterung, Rahmen und Hover-Effekte.

Button-Stile

Bootstrap bietet eine Vielzahl von vordefinierten Button-Stilen, die mit bestimmten Klassen angewendet werden können. Diese Stile umfassen:

  • btn-primary: Verleiht dem Button eine Primärfarbe, die typischerweise für primäre Aktionen verwendet wird;
  • btn-secondary: Verleiht dem Button eine Sekundärfarbe, die oft für sekundäre Aktionen verwendet wird;
  • btn-success: Gibt dem Button eine Farbe, die Erfolg anzeigt, oft für positive Aktionen verwendet;
  • btn-danger: Bietet eine Farbe, die Gefahr oder kritische Aktionen signalisiert;
  • btn-warning: Verleiht dem Button eine Farbe, die Warnung oder Vorsicht darstellt;
  • btn-info: Gibt dem Button eine Farbe, um informative Nachrichten zu vermitteln;
  • btn-light: Verleiht dem Button ein helles Farbschema, geeignet für hellere Hintergründe;
  • btn-dark: Verleiht dem Button ein dunkles Farbschema, geeignet für dunklere Hintergründe;
  • btn-link: Rendert den Button als einfachen Link ohne zusätzliche Gestaltung, oft für Inline-Aktionen verwendet.
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>Buttons Part 1 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">
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
</div>
<div class="col">
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-info">Info Button</button>
</div>
<div class="col">
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-link">Link Button</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Button-Größen

Wir können die Größe von Buttons mit bestimmten Klassen anpassen.

  • btn-lg: Diese Klasse vergrößert die Größe des Buttons, sodass er größer als die Standardgröße ist. Sie wird typischerweise für primäre oder prominente Buttons verwendet, die mehr Aufmerksamkeit erfordern;
  • btn-sm: Im Gegensatz dazu verkleinert diese Klasse die Größe des Buttons, sodass er kleiner als die Standardgröße ist. Sie wird oft für sekundäre oder Hilfs-Buttons verwendet, die weniger Betonung benötigen.
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>Buttons Part 1 Example 2</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-secondary">Default Size Button</button>
<button type="button" class="btn btn-success btn-sm">Small Button</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

Deaktivierter Zustand

Das Hinzufügen des disabled-Boolean-Attributs zu einem <button>-Element macht es inaktiv. Deaktivierte Schaltflächen haben pointer-events: none angewendet, wodurch Hover- und Aktivzustände verhindert 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>Buttons Part 1 Example 3</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">
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary" disabled>Primary Disabled Button</button>
</div>
<div class="col">
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-secondary" disabled>Secondary Disabled Button</button>
</div>
<div class="col">
<button type="button" class="btn btn-outline-primary">Primary Outline Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary Outline Disabled Button</button>
</div>
<div class="col">
<button type="button" class="btn btn-outline-secondary">Secondary Outline Button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Secondary Outline Disabled Button</button>
</div>
</div>
<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 4
some-alt