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.
index.html
<!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.
index.html
<!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.
index.html
<!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?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 4
