Bootstrap 5- Auswahlmenü

Auswahlmenü

Auswahlmenü (Wählen Sie eine Option):

Mehrfachauswahlmenü (Halten Sie STRG oder UMSCHALT gedrückt (oder ziehen Sie mit der Maus), um mehrere zu wählen):

Wenn Sie möchten, dass Benutzer aus mehreren Optionen auswählen können, verwenden Sie das Auswahlmenü.

Um die Stile der Auswahlmenüs in Bootstrap 5 zu konfigurieren, fügen Sie .form-select Klassen zum Hinzufügen zum <select>-Element：

Beispiel

<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Versuchen Sie es selbst

Größe des Auswahlmenüs

Verwenden Sie .form-select-lg oder .form-select-sm Klassen, um die Größe des Auswahlmenüs zu ändern：

Beispiel

<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">

Versuchen Sie es selbst

Das Auswahlmenü deaktivieren

Verwenden Sie disabled Attribute zur Deaktivierung des Auswahlmenüs：

Beispiel

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Versuchen Sie es selbst

Datenspeiselement

Bootstrap kann auch das Stile der Datenspeiselemente einstellen, die eine vordefinierte Optionsliste des <input>-Elements sind：

Wählen Sie Ihren Browser aus der Liste aus：

Beispiel

<label for="browser" class="form-label">Wählen Sie Ihren Browser aus der Liste aus：</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Versuchen Sie es selbst