Bootstrap - Button Groups: A Beginner's Guide

Hallo, angehende Web-Entwickler! Heute tauchen wir ein in die wonderful Welt der Bootstrap Button Groups. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich aufgeregt, Sie auf dieser Reise zu führen. Machen Sie sich keine Sorgen, wenn Sie noch nie eine Zeile Code geschrieben haben – wir beginnen bei den Grundlagen und arbeiten uns hinauf. Los geht's!

Was sind Button Groups?

Bevor wir uns dem Code widmen, lassen Sie uns verstehen, was Button Groups sind. Stellen Sie sich vor, Sie erstellen eine Fernbedienung für einen Fernseher. Anstatt alle Tasten verstreut zu platzieren, gruppieren Sie ähnliche Tasten zusammen. Genau das tun wir in der Webgestaltung mit Button Groups!

Button Groups in Bootstrap erlauben es uns, verwandte Buttons zusammen zu klustern, was zu einer organisierteren und visuell ansprechenderen Benutzeroberfläche führt. Es ist, als gäbe man seinen Buttons ein gemütliches kleines Zuhause, in dem sie in Harmonie zusammenleben können.

Grundlegendes Beispiel

Lassen Sie uns mit einem einfachen Beispiel anfangen, um einen ersten Eindruck zu gewinnen:

<div class="btn-group" role="group" aria-label="Grundlegendes 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>

Dieser Code erstellt eine Gruppe von drei Buttons mit den Beschriftungen "Links", "Mitte" und "Rechts". Lassen Sie uns das auseinandernehmen:

1. Wir umschließen unsere Buttons in einem <div> mit der Klasse btn-group.
2. Das Attribut role="group" hilft Screen-Readern zu verstehen, dass diese Buttons verwandt sind.
3. aria-label bietet eine Beschreibung für die Button-Gruppe.
4. Jeder <button> hat die Klassen btn und btn-primary, die ihnen das Bootstrap-Button-Styling verleihen.

Wenn Sie diesen Code ausführen, werden Sie drei blaue Buttons sehen, die wie Erbsen in einem Schoten zusammengekuschelt sind!

Mischstile

Nun, lassen Sie uns ein bisschen Abwechslung in den Mix bringen. In der realen Welt sind nicht alle Buttons gleich. Einige sind wichtiger als andere, und wir können dies visuell darstellen:

<div class="btn-group" role="group" aria-label="Mischstile">
<button type="button" class="btn btn-danger">Löschen</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-success">Genehmigen</button>
</div>

In diesem Beispiel verwenden wir verschiedene Bootstrap-Farbe-Klassen:

• btn-danger für einen roten "Löschen"-Button
• btn-warning für einen gelben "Warning"-Button
• btn-success für einen grünen "Genehmigen"-Button

Dies erstellt eine visuell auffällige Gruppe von Buttons, die jeweils farblich kodiert ist. Es ist wie eine Ampel für Ihre Webseite!

Umrandungsstile

Manchmal möchten Sie, dass Ihre Buttons etwas subtiler sind. Da kommen die Umrandungsstile ins Spiel:

<div class="btn-group" role="group" aria-label="Umrandungsstile">
<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-info">Info</button>
</div>

Durch die Verwendung von btn-outline-* anstelle von btn-* erhalten wir Buttons mit farbigen Umrandungen und Text, aber transparentem Hintergrund. Sie sind perfekt für die Zeiten, in denen Sie eine leichtere Anmutung in Ihrem Design wünschen.

Checkbox- und Radiobutton-Gruppen

Nun werden wir ein bisschen interaktiver. Bootstrap ermöglicht es uns, Button-Gruppen zu erstellen, die wie Checkboxen oder Radiobuttons funktionieren:

<div class="btn-group" role="group" aria-label="Grundlegende Checkbox-Toggle-Button-Gruppe">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Dieser Code erstellt eine Gruppe von drei Buttons, die wie Checkboxen funktionieren. Sie können mehrere Buttons anklicken, und sie bleiben "gedrückt", bis Sie sie erneut anklicken. Es ist wie eine Aufgabenliste direkt in Ihrer Button-Gruppe!

ButtonToolbar

Manchmal müssen Sie Ihre Button-Gruppen gruppieren. Da kommen Button Toolbars ins Spiel:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar mit Button-Gruppen">
<div class="btn-group me-2" role="group" aria-label="Erste Gruppe">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Zweite Gruppe">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="Dritte Gruppe">
<button type="button" class="btn btn-info">6</button>
</div>
</div>

Dies erstellt eine Toolbar mit drei Button-Gruppen. Es ist wie das Organisieren Ihrer Küchenutensilien – Gabeln in einem Schublade, Löffel in einer anderen, und das eine seltsame Gerät, das Ihre Tante Ihnen geschenkt hat, in seinem eigenen specialen Platz.

Größenanpassung

Genau wie Menschen kommen Buttons in allen Größen vor. Bootstrap macht es einfach, die Größe Ihrer gesamten Button-Gruppe zu verändern:

<div class="btn-group btn-group-lg" role="group" aria-label="Große Button-Gruppe">
<button type="button" class="btn btn-outline-dark">Links</button>
<button type="button" class="btn btn-outline-dark">Mitte</button>
<button type="button" class="btn btn-outline-dark">Rechts</button>
</div>

Durch Hinzufügen von btn-group-lg zum Container machen wir alle Buttons größer. Sie können auch btn-group-sm für kleinere Buttons verwenden. Es ist wie bei Goldlöckchen – Sie können die Größe finden, die genau richtig ist!

Einbettung

Manchmal benötigen Sie eine Button-Gruppe innerhalb einer Button-Gruppe. Bootstrap hat对此 vorbereitet:

<div class="btn-group" role="group" aria-label="Button-Gruppe mit eingebettetem Dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>

<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown-Link</a></li>
<li><a class="dropdown-item" href="#">Dropdown-Link</a></li>
</ul>
</div>
</div>

Dies erstellt eine Button-Gruppe mit zwei regulären Buttons und einem Dropdown-Button. Es ist wie diese russischen Puppen, aber mit Buttons!

Vertikale Variation

Zuletzt, aber nicht minder wichtig, drehen wir Dinge um und verwenden vertikale Button-Gruppen:

<div class="btn-group-vertical" role="group" aria-label="Vertikale Button-Gruppe">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>

Durch die Verwendung von btn-group-vertical anstelle von btn-group stapeln wir unsere Buttons vertikal. Es ist perfekt für die Zeiten, in denen Sie möchten, dass Ihre Buttons eine Pyramide bilden anstatt eine Linie!

Fazit

Und da haben Sie es, Leute! Wir haben die Welt der Bootstrap Button Groups durchquert, von grundlegenden Beispielen bis zu vertikalen Variationen. Erinnern Sie sich daran, Übung macht den Meister, also fürchten Sie sich nicht, diese Beispiele auszuprobieren. Mischen und kombinieren Sie verschiedene Stile, Größen und Layouts, um Button-Gruppen zu erstellen, die perfekt für Ihre Projekte sind.

Webentwicklung dreht sich um Kreativität und Problemlösung, und Button Groups sind nur eines der vielen Werkzeuge, die Ihnen zur Verfügung stehen. Bleiben Sie neugierig, bleiben Sie coden, und vor allem, haben Sie Spaß! Bis下次, happy coding!

Credits: Image by storyset