Bootstrap 5-Eingabegruppe

Eingabegruppe

.input-group Klassen sind Behälter, die durch das Hinzufügen von Symbolen, Text oder Schaltflächen vor oder nach dem Eingabefeld als "Hilfstext" den Eingabefeldern eine Erweiterung verleihen.

Um den Stil eines bestimmten Hilfstexts zu setzen, verwenden Sie .input-group-text Klasse:

Beispiel

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="Benutzername">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Ihre E-Mail">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

Probieren Sie es selbst aus

Eingabegruppengröße

Bitte setze .input-group-sm Klasse für kleine Eingabegruppen, setze .input-group-lg Für große Eingabegruppen:

Beispiel

<div class="input-group mb-3 input-group-sm">
   <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 mb-3 input-group-lg">
  <span class="input-group-text">Groß</span>
  <input type="text" class="form-control">
</div>

Probieren Sie es selbst aus

Mehrere Eingaben und Assistenten

Fügen Sie mehrere Eingabekontrollen oder Plugins hinzu:

Beispiel

<!-- Mehrere Eingabekontrollen -->
<div class="input-group mb-3">
  <span class="input-group-text">Name</span>
  <input type="text" class="form-control" placeholder="Nachname">
  <input type="text" class="form-control" placeholder="Name">
</div>
<!-- Mehrere Plugins/Help-Texte -->
<div class="input-group mb-3">
  <span class="input-group-text">Eins</span>
  <span class="input-group-text">Zwei</span>
  <span class="input-group-text">Drei</span>
  <input type="text" class="form-control">
</div>

Probieren Sie es selbst aus

Eingabegruppe mit Kontrollkästchen und Auswahlkästchen

Sie können auch Kontrollkästchen oder Auswahlkästchen anstelle von Text verwenden:

Beispiel

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Einige Text">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="Einige Text">
</div>

Probieren Sie es selbst aus

Eingabegruppe-Schaltfläche

Beispiel

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">Grundlegende Schaltfläche</button>
  <input type="text" class="form-control" placeholder="Einige Text">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Suche">
  <button class="btn btn-success" type="submit">Gehe</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Einige Text">
  <button class="btn btn-primary" type="button">OK</button>
  <button class="btn btn-danger" type="button">Abbrechen</button>
</div>

Probieren Sie es selbst aus

Eingabegruppe mit Dropdown-Schaltfläche

Fügen Sie in der Eingabegruppe eine Dropdown-Schaltfläche hinzu. Beachten Sie, dass Sie keine wie gewöhnlich .dropdown verpackende Container benötigen.

Beispiel

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Dropdown-Schaltfläche
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Verknüpfung 1</a></li>
    <li><a class="dropdown-item" href="#">Verknüpfung 2</a></li>
    <li><a class="dropdown-item" href="#">Verknüpfung 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Benutzername">
</div>

Probieren Sie es selbst aus