Bootstrap - Schwebende Beschriftungen: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir in die wunderbare Welt von Bootstraps Schwebenden Beschriftungen ein. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich, dich auf dieser Reise zu führen. Keine Sorge, wenn du neu im Programmieren bist - wir gehen Schritt für Schritt vor, und bald wirst du Beschriftungen schweben lassen wie ein Profi!

Was sind Schwebende Beschriftungen?

Bevor wir loslegen, lassen Sie uns verstehen, was Schwebende Beschriftungen sind. Stell dir vor, du füllst ein Formular aus, und die Beschriftung für jedes Eingabefeld schwebt zauberhaft über das Feld, wenn du anfängst zu schreiben. Das ist die Essenz der Schwebenden Beschriftungen! Sie bieten eine saubere, intuitive Benutzeroberfläche, die Platz spart und auch noch ziemlich cool aussieht.

Grundlegendes Beispiel

Lass uns mit einem grundlegenden Beispiel anfangen, um uns warm zu machen:

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">E-Mail-Adresse</label>
</div>

Was passiert hier? Lassen Sie es uns auseinandernehmen:

1. Wir umschließen unser Eingabe- und Beschriftungselement in einer div mit der Klasse form-floating.
2. Das input-Element kommt vor dem label (diese Reihenfolge ist wichtig!).
3. Wir fügen dem Eingabe-Element eine placeholder-Eigenschaft hinzu, die Bootstrap verwendet, um die Größe der Beschriftung zu bestimmen.

Wenn du den Fokus auf das Eingabe-Element legst oder anfängst zu schreiben, wird die Beschriftung elegant über das Eingabefeld schweben. Es ist wie Magie, aber es ist nur clevere CSS!

Textareas

Schwebende Beschriftungen sind nicht nur für einfache Eingaben geeignet. Sie funktionieren hervorragend mit Textareas:

<div class="form-floating">
<textarea class="form-control" placeholder="Gib hier einen Kommentar ein" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Kommentare</label>
</div>

Dies funktioniert genauso wie unser grundlegendes Beispiel, nur mit einer textarea anstelle eines input. Perfekt für Zeiten, in denen Benutzer längeren Text eingeben müssen!

Auswahlfelder

Was ist mit Dropdown-Menüs? Bootstrap hat dich abgedeckt:

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Beispiel für schwebende Beschriftungsauswahl">
<option selected>Öffne dieses Auswahlfeld</option>
<option value="1">Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
</select>
<label for="floatingSelect">Funktioniert mit Auswahlfeldern</label>
</div>

Die schwebende Beschriftung wird angezeigt, wenn eine Option ausgewählt wird. Es ist eine großartige Möglichkeit, deine Formulare konsistent über verschiedene Eingabetypen hinweg aussehen zu lassen.

Deaktiviert

Manchmal musst du möglicherweise ein Eingabe-Element deaktivieren. Hier ist, wie du das machen kannst, während du die schwebende Beschriftung beibehältst:

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">E-Mail-Adresse (deaktiviert)</label>
</div>

Füge einfach das Attribut disabled zu deinem Eingabe-Element hinzu, und Bootstrap wird es entsprechend gestalten.

Nur-Lesen-Plaintext

Was ist, wenn du einige Informationen anzeigen möchtest, die nicht geändert werden können? Hier kommt der Nur-Lesen-Plaintext ins Spiel:

<div class="form-floating mb-3">
<input type="email" class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]" readonly>
<label for="floatingEmptyPlaintextInput">Leeres Eingabefeld</label>
</div>

Dies erstellt ein nicht bearbeitbares Feld, das dennoch von der schwebenden Beschriftungsstil profitiert.

Eingabegruppen

Schwebende Beschriftungen können auch mit Eingabegruppen für komplexere Formular layouts verwendet werden:

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Benutzername">
<label for="floatingInputGroup1">Betrag</label>
</div>
</div>

Dieses Beispiel kombiniert eine Eingabegruppe (das Dollar-Zeichen-Präfix) mit einem schwebenden Beschriftungseingabe.

Layout

Schließlich sehen wir uns an, wie wir diese schwebenden Beschriftungseingaben in einem responsiven Raster anordnen können:

<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]">
<label for="floatingInputGrid">E-Mail-Adresse</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Öffne dieses Auswahlfeld</option>
<option value="1">Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
</select>
<label for="floatingSelectGrid">Funktioniert mit Auswahlfeldern</label>
</div>
</div>
</div>

Dies erstellt eine Zweispaltige Anordnung, die vertikal gestapelt wird, wenn die Bildschirme kleiner werden.

Alles zusammenfügen

Nun, da wir all diese verschiedenen Aspekte der schwebenden Beschriftungen behandelt haben, erstellen wir ein kleines Formular, das alles zusammenbringt:

<form class="container mt-5">
<h2>Kontaktiere uns</h2>
<div class="row g-3">
<div class="col-md-6">
<div class="form-floating">
<input type="text" class="form-control" id="floatingName" placeholder="Max Mustermann">
<label for="floatingName">Vollständiger Name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input type="email" class="form-control" id="floatingEmail" placeholder="[email protected]">
<label for="floatingEmail">E-Mail-Adresse</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<select class="form-select" id="floatingSelect">
<option selected>Wähle ein Thema</option>
<option value="1">Allgemeine Anfrage</option>
<option value="2">Technischer Support</option>
<option value="3">Feedback</option>
</select>
<label for="floatingSelect">Thema</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<textarea class="form-control" placeholder="Gib hier einen Kommentar ein" id="floatingTextarea" style="height: 100px"></textarea>
<label for="floatingTextarea">Kommentare</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Einreichen</button>
</div>
</div>
</form>

Dieses Formular kombiniert alle Elemente, die wir besprochen haben: Eingaben, Auswahlfelder und Textareas, alle mit schwebenden Beschriftungen, angeordnet in einem responsiven Rasterlayout.

Fazit

Und das war's, Leute! Wir haben die schwebenden Beschriftungen von Bootstrap von innen nach außen behandelt. Von einfachen Eingaben bis zu komplexen Layouts hast du nun die Werkzeuge, um schicke, benutzerfreundliche Formulare zu erstellen, die deine Benutzer beeindrucken und deine Websites hervorheben werden.

Denke daran, Übung macht den Meister. Versuche, diese Beispiele zu experimentieren, mische verschiedene Elemente und sieh, was du schaffen kannst. Bereitwillig wirst du schwebende Beschriftungen wie ein erfahrener Web-Entwickler erstellen!

Frohes Coden und möge deine Beschriftungen immer elegant schweben!

Credits: Image by storyset