Bootstrap - Buttons Demo

Hallo da, zukünftiger Codingsuperstar! Heute tauchen wir in die wunderbare Welt der Bootstrap-Buttons ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Also hol dir dein Lieblingsgetränk, setz dich bequem hin und lassen wir gemeinsam dieses aufregende Abenteuer beginnen!

Was sind Bootstrap Buttons?

Bevor wir ins Detail gehen, lassen wir uns über das actually sind Bootstrap-Buttons unterhalten. Stell dir vor, du baust ein Haus. Die Wände und das Dach sind deine HTML-Struktur, die Farbe ist dein CSS, und Bootstrap? Na ja, das ist wie ein magisches Werkzeugkasten, der alles einfacher und schöner macht. Bootstrap-Buttons sind vorgestaltete, sofort einsetzbare Buttons, die du leicht zu deinen Webseiten hinzufügen kannst.

Erste Schritte mit Bootstrap

Zuerst einmal, wir müssen unser Bootstrap-Spielplatz einrichten. Keine Sorge, das ist einfacher als ein Spiel Monopoly aufzustellen!

Schritt 1: Einrichtung der HTML-Struktur

Lassen wir mit einer grundlegenden HTML-Struktur beginnen:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Buttons Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Unsere Buttons kommen hier hin -->
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Das ist wie das Aufstellen deines Leinwands bevor du anfängst zu malen. Wir haben die Bootstrap CSS- und JS-Dateien eingebunden, die uns Zugang zu all den Bootstrap-Schätzen geben.

Grundlegende Bootstrap Buttons

Jetzt fügen wir einige Buttons zu unserer Seite hinzu!

<button type="button" class="btn btn-primary">Primär</button>
<button type="button" class="btn btn-secondary">Sekundär</button>
<button type="button" class="btn btn-success">Erfolg</button>
<button type="button" class="btn btn-danger">Gefahr</button>
<button type="button" class="btn btn-warning">Warnung</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Hell</button>
<button type="button" class="btn btn-dark">Dunkel</button>

Hier ist, was jede Klasse macht:

btn: Dies ist die Grundklasse für alle Bootstrap-Buttons.
btn-primary, btn-secondary, etc.: Diese Klassen definieren die Farbe und den Stil des Buttons.

Button-Größen

Genau wie du an einer Fast-Food-Kette unterschiedliche Größen an Pommes bekommmst, gibt es auch bei Bootstrap-Buttons verschiedene Größen!

<button type="button" class="btn btn-primary btn-lg">Großer Button</button>
<button type="button" class="btn btn-primary">Standard-Button</button>
<button type="button" class="btn btn-primary btn-sm">Kleiner Button</button>

btn-lg: Macht den Button größer
btn-sm: Macht den Button kleiner

Outline Buttons

Manchmal möchtest du einen Button, der etwas subtiler ist. Da kommen Outline-Buttons ganz gelegen!

<button type="button" class="btn btn-outline-primary">Primär</button>
<button type="button" class="btn btn-outline-secondary">Sekundär</button>
<button type="button" class="btn btn-outline-success">Erfolg</button>

Die btn-outline-* Klassen geben dir Buttons mit farbigen Rändern und transparentem Hintergrund.

Block Buttons

Brauchst du einen Button, der die volle Breite seines Elternteils einnimmt? Block-Buttons sind deine Freunde!

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Block-Button</button>
<button class="btn btn-primary" type="button">Block-Button</button>
</div>

Die d-grid Klasse auf dem übergeordneten Div und die gap-2 Klasse fügen etwas Abstand zwischen den Buttons hinzu.

Button-Zustände

Buttons können unterschiedliche Zustände haben, genau wie wir unterschiedliche Stimmungen haben!

<button type="button" class="btn btn-primary">Normaler Button</button>
<button type="button" class="btn btn-primary active">Aktiver Button</button>
<button type="button" class="btn btn-primary" disabled>Deaktiver Button</button>

Die active Klasse lässt den Button erscheinen, als wäre er gedrückt.
Das disabled Attribut macht den Button unklichbar.

Toggle Buttons

Toggle-Buttons sind wie Lichtschalter - sie können an oder aus sein!

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle-Button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Aktiver Toggle-Button</button>

Das data-bs-toggle="button" Attribut aktiviert die Toggle-Funktionalität.

Button-Gruppen

Manchmal mögen Buttons zusammen sein. Da kommen Button-Gruppen ins Spiel!

<div class="btn-group" role="group" aria-label="Einfaches Beispiel">
<button type="button" class="btn btn-primary">Links</button>
<button type="button" class="btn btn-primary">Mitte</button>
<button type="button" class="btn btn-primary">Rechts</button>
</div>

Die btn-group Klasse gruppiert die Buttons zusammen.

Dropdown Buttons

Dropdown-Buttons sind wie Überraschungsboxen - klicke darauf und mehr Optionen erscheinen!

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown-Button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Aktion</a></li>
<li><a class="dropdown-item" href="#">Eine andere Aktion</a></li>
<li><a class="dropdown-item" href="#">ETwas anderes hier</a></li>
</ul>
</div>

Die dropdown-toggle Klasse und das data-bs-toggle="dropdown" Attribut aktivieren die Dropdown-Funktionalität.

Fazit

Glückwunsch! Du hast gerade eine rasante Tour durch die Bootstrap-Buttons absolviert. Denke daran, Übung macht den Meister, also habe keine Angst, verschiedene Kombinationen auszuprobieren. Wer weiß? Vielleicht erstellst du das nächste große Ding im Webdesign!

Hier ist eine schnelle Referenztabelle aller Button-Klassen, die wir besprochen haben:

Klasse	Beschreibung
btn	Grundlegende Button-Klasse
btn-primary	Button mit Primärfarbe
btn-secondary	Button mit Sekundärfarbe
btn-success	Button mit Erfolgsfarbe
btn-danger	Button mit Gefahrenfarbe
btn-warning	Button mit Warnfarbe
btn-info	Button mit Infofarbe
btn-light	Button mit Helligkeitsfarbe
btn-dark	Button mit Dunkelfarbe
btn-lg	Großer Button
btn-sm	Kleiner Button
btn-outline-*	Outline-Button
active	Aktiver Button
disabled	Deaktiver Button
data-bs-toggle="button"	Toggle-Button
btn-group	Button-Gruppe
dropdown-toggle	Dropdown-Button

Happy Coding und möge das Bootstrap mit dir sein!

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Raster-Demo

Nächstes Tutorial:

Bootstrap - Navigationsbeispiel