Bootstrap - Eingruppen: Ein freundlicher Leitfaden für Anfänger

Hallo da drüben, zukünftige Webentwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise durch Bootstraps Eingruppen zu sein. Als jemand, der seit vielen Jahren Informatik unterrichtet, habe ich unzählige Schüler gesehen, die aufleuchten, wenn sie diese Konzepte verstehen. Also, tauchen wir ein und lassen Sie Ihre Webformulare großartig aussehen!

Was sind Eingruppen?

Bevor wir beginnen, stellen Sie sich vor, Sie gestalten ein Formular für einen Pizzalieferdienst. Sie benötigen Felder für den Namen des Kunden, die Adresse und natürlich die wichtigen Pizzabeläge. Eingruppen sind wie das Geheimrezept, das diese Formularelemente kohärent und professionell aussehen lässt.

In Bootstrap ermöglichen Eingruppen das Hinzufügen von Präfixen, Suffixen oder anderen Elementen zu Formularsteuerelementen. Sie verbessern die optische Anziehungskraft und Funktionalität Ihrer Formulare, machen sie benutzerfreundlicher und intuitiver.

Beispiel: Grundlegendes Eingruppen

Lassen Sie mit einem einfachen Beispiel beginnen:

<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Benutzername">
</div>

In diesem Code:

• Wir erstellen einen Container mit der Klasse input-group.
• Die Klasse mb-3 fügt unten etwas Abstand hinzu.
• Wir verwenden input-group-text für das '@'-Symbol als Präfix.
• Das Eingabefeld verwendet die Klasse form-control für das Styling.

Dies erstellt ein schickes Eingabefeld mit einem '@'-Symbol, perfekt für die Eingabe von Benutzernamen oder E-Mail-Adressen!

Umbruch

Manchmal mögen Ihre Eingruppen zu lang für eine einzelne Zeile sein. Keine Sorge; Bootstrap hat对此有所准备，可以自动换行。

Beispiel: Eingruppen mit Umbruch

<div class="input-group flex-nowrap">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Benutzername">
<span class="input-group-text">.com</span>
</div>

Hier fügen wir flex-nowrap zur Eingruppe hinzu. Dies stellt sicher, dass alle Elemente so lange wie möglich in einer Zeile bleiben, aber ordentlich umgebrochen werden, wenn der Bildschirm zu schmal ist.

Größenanpassung

Wie Goldlöckchen manchmal brauchen Sie Ihre Eingruppen in der richtigen Größe. Bootstrap bietet verschiedene Größenoptionen, um Ihren Bedürfnissen gerecht zu werden.

Beispiel: Unterschiedlich große Eingruppen

<div class="input-group input-group-sm mb-3">
<span class="input-group-text">Klein</span>
<input type="text" class="form-control">
</div>

<div class="input-group mb-3">
<span class="input-group-text">Standard</span>
<input type="text" class="form-control">
</div>

<div class="input-group input-group-lg">
<span class="input-group-text">Groß</span>
<input type="text" class="form-control">
</div>

Durch Hinzufügen von input-group-sm oder input-group-lg können Sie kleine oder große Eingruppen erstellen. Die Standardgröße erfordert keine zusätzliche Klasse.

Ankreuzfelder und Radiobuttons

Manchmal reicht ein einfaches Texteingabefeld nicht aus. Vielleicht möchten Sie Ankreuzfelder oder Radiobuttons zu Ihren Eingruppen hinzufügen. Sehen wir uns an, wie wir das machen können!

Beispiel: Ankreuzfeld in Eingruppe

<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox">
</div>
<input type="text" class="form-control" placeholder="Ankreuzfeld hier">
</div>

In diesem Beispiel platzieren wir ein Ankreuzfeld innerhalb eines input-group-text-Divs. Die Klasse form-check-input stylt unser Ankreuzfeld, während mt-0 die obere Marginalien entfernt.

Mehrere Eingaben

Warum sich mit einer Eingabe zufrieden geben, wenn Sie viele haben können? Lassen Sie uns eine Eingruppe mit mehreren Feldern erstellen.

Beispiel: Mehrere Eingaben

<div class="input-group">
<span class="input-group-text">Vor- und Nachname</span>
<input type="text" class="form-control" placeholder="Vorname">
<input type="text" class="form-control" placeholder="Nachname">
</div>

Dies erstellt zwei Eingabefelder nebeneinander, perfekt zum Sammeln des vollständigen Namens eines Benutzers!

Button-addons

Buttons können Interaktivität zu Ihren Eingruppen hinzufügen. Sehen wir uns an, wie man sie integriert.

Beispiel: Button-addon

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Empfänger-Benutzername">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>

Hier fügen wir einen Button direkt neben dem Eingabefeld hinzu. Dies könnte für Aktionen wie das Absenden eines Formulars oder das Auslösen einer Suche verwendet werden.

Buttons mit Dropdowns

Möchten Sie Ihren Benutzern mehr Optionen bieten? Lassen Sie uns eine Dropdownliste zu unserem Button-addon hinzufügen.

Beispiel: Button mit Dropdown

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Suche...">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Optionen
</button>
<ul class="dropdown-menu dropdown-menu-end">
<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>

Dies erstellt einen Dropdownbutton neben unserem Eingabefeld, der zusätzliche Optionen für den Benutzer bietet.

Benutzerdefinierte Formulare

Bootstrap ermöglicht es Ihnen auch, benutzerdefinierte Formularelemente innerhalb von Eingruppen zu erstellen. Sehen wir uns ein Beispiel für eine benutzerdefinierte Auswahlliste an.

Beispiel: Benutzerdefinierte Auswahlliste

<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Optionen</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Wählen...</option>
<option value="1">Eins</option>
<option value="2">Zwei</option>
<option value="3">Drei</option>
</select>
</div>

Dies erstellt eine benutzerdefinierte Auswahlliste innerhalb unserer Eingruppe, die konsistent mit anderen Bootstrap-Elementen gestylt ist.

Benutzerdefiniertes Dateifeinput

Last but not least, sehen wir uns an, wie man ein benutzerdefiniertes Dateifeinput in einer Eingruppe erstellt.

Beispiel: Benutzerdefiniertes Dateifeinput

<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupFile01">Hochladen</label>
<input type="file" class="form-control" id="inputGroupFile01">
</div>

Dies erstellt ein stilvolles Dateifeinput-Feld, perfekt zum Hochladen von Dateien über Ihr Formular.

Schlussfolgerung

Und hier haben Sie es, Leute! Wir haben die Welt der Bootstrap-Eingruppen durchlaufen, von grundlegenden Beispielen bis hin zu komplexeren Konfigurationen. Denken Sie daran, dass der Schlüssel zum Beherrschen dieser Konzepte die Übung ist. Versuchen Sie, verschiedene Elemente zu kombinieren, spielen Sie mit Größen und Stilen herum und vor allem: haben Sie Spaß dabei!

Als wir uns verabschieden, erinnere ich mich an einen Schüler, der mir einmal sagte: "Bootstrap ist wie LEGO für Webdesign!" Und wissen Sie was? Er hatte vollkommen recht. Sie haben jetzt all diese wonderful pieces - es ist an der Zeit, etwas Amazing zu bauen!

Frohes Coden und möge Ihre Formulare stets benutzerfreundlich und visuell ansprechend sein!

Credits: Image by storyset