Bootstrap - Close Button

Hallo, angehende Web-Entwickler! Heute tauchen wir in eines der nützlichen kleinen Komponenten von Bootstrap ein: den Close Button. Es mag klein erscheinen, aber glaubt mir, es ist ein mächtiges Werkzeug in Ihrem Web-Design-Werkzeugkasten. Also, rollen wir die Ärmel hoch und los geht's!

Was ist ein Close Button?

Bevor wir uns dem Code widmen, lassen Sie uns verstehen, was ein Close Button ist. Sie haben sicherlich diese kleinen 'x'-Symbole überall im Web gesehen, oder? Sie sind normalerweise in der Ecke von Pop-ups, Alerts oder Modals, warten darauf, dass Sie darauf klicken, damit das Element verschwindet. Das ist unser Close Button!

Grundlegendes Beispiel

Lassen Sie uns mit der grundlegendsten Version eines Bootstrap Close Buttons beginnen.

<button type="button" class="btn-close" aria-label="Schließen"></button>

Diese einfache Codezeile gibt Ihnen einen perfekt gestalteten Close Button. Lassen Sie uns das auseinandernehmen:

• <button>: Das ist unser HTML Button-Element.
• type="button": Das verhindert, dass der Button ein Formular absendet, wenn er sich darin befindet.
• class="btn-close": Diese Bootstrap-Klasse gibt dem Button seine Close-Button-Gestaltung.
• aria-label="Schließen": Das ist für die Zugänglichkeit, es sagt Screen-Readern, dass dieser Button etwas schließt.

Wenn Sie diesen Code verwenden, wird ein schickes 'x'-Button auf Ihrer Seite angezeigt. Cool, oder?

Anpassung des grundlegenden Close Buttons

Nehmen wir an, Sie möchten, dass Ihr Close Button etwas größer ist. Bootstrap hat für Sie gesorgt:

<button type="button" class="btn-close" aria-label="Schließen" style="font-size: 2rem;"></button>

Hier haben wir ein inline-Style hinzugefügt, um die Schriftgröße zu erhöhen. Sie können den Wert 2rem nach Bedarf anpassen.

Deaktivierter Zustand

Manchmal möchten Sie einen Close Button, den Benutzer sehen können, aber nicht anklicken können. Hier kommt der deaktivierte Zustand ins Spiel.

<button type="button" class="btn-close" disabled aria-label="Schließen"></button>

Durch Hinzufügen des Attributes disabled erstellen wir einen Close Button, der leicht ausgeblendet aussieht und nicht auf Klicks reagiert. Es ist, als ob man einem Button ein "Nicht berühren"-Schild anbringt!

Dunkle Variante

Arbeiten Sie an einer dunkelthematisierten Website? Keine Sorge! Bootstrap hat eine dunkle Variante des Close Buttons für Sie.

<button type="button" class="btn-close btn-close-white" aria-label="Schließen"></button>

Durch Hinzufügen der Klasse btn-close-white erhalten wir einen Close Button, der sich schön gegen dunkle Hintergründe abhebt. Es ist, als würde Ihr Close Button einen stilvollen weißen Smoking für eine Abendgesellschaft tragen!

Kombination der dunklen Variante mit dem deaktivierten Zustand

Sie können sogar die dunkle Variante mit dem deaktivierten Zustand kombinieren:

<button type="button" class="btn-close btn-close-white" disabled aria-label="Schließen"></button>

Das gibt Ihnen einen weißen Close Button, der deaktiviert ist. Es ist perfekt für dunkelthematische Interfaces, bei denen Sie einen nicht interaktiven Close Button anzeigen möchten.

Praktisches Beispiel: Erstellen einer ablehnbaren Alert

Nun setzen wir unseren Close Button in einer realen Welt-Szene ein. Wir erstellen eine ablehnbare Alert:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Unglaublich!</strong> Sie sollten sich einige der untenstehenden Felder ansehen.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Schließen"></button>
</div>

In diesem Beispiel:

• Wir haben eine Alert mit den Klassen alert und alert-warning erstellt.
• Die Klassen alert-dismissible und fade show machen die Alert ablehnbar und fügen eine Fade-Wirkung hinzu.
• Unser Close Button befindet sich innerhalb der Alert und hat zusätzliche data-bs-dismiss="alert"-Eigenschaft, die Bootstrap anweist, die übergeordnete Alert bei einem Klick zu schließen.

Methoden-Tabelle

Hier ist eine Tabelle der am häufigsten verwendeten Methoden für die Arbeit mit Close Buttons in Bootstrap:

Methode	Beschreibung
$().button('toggle')	Schaltet den Push-Zustand um. Gibt dem Button das Aussehen, als wäre er aktiviert worden.
$().button('dispose')	Zerstört eine Button-Komponente.
$().button('reset')	Setzt den Button-Zustand zurück - tauscht den Text gegen den Originaltext aus.

Denken Sie daran, dass Sie Bootstrap's JavaScript-Datei in Ihr Projekt aufnehmen müssen, um diese Methoden verwenden zu können.

Schlussfolgerung

Und da haben Sie es, Leute! Sie sind nun mit dem Wissen ausgestattet, Close Buttons in Ihren Bootstrap-Projekten hinzuzufügen und anzupassen. Vom grundlegenden Button bis zur dunklen Variante, vom aktiven bis zum deaktivierten Zustand, Sie sind bereit, Dinge stilvoll zu schließen!

Erinnern Sie sich daran, dass der Schlüssel zum Beherrschen der Web-Entwicklung die Übung ist. Also probieren Sie diese Close Buttons in verschiedenen Szenarien aus. Vielleicht erstellen Sie ein Modal mit einem Close Button oder eine ablehnbare Karte. Die Möglichkeiten sind endlos!

Frohes Coden und möge Ihre Close Buttons stets sanft klicken!

Credits: Image by storyset