Menu wyboru Bootstrap 5

Wybór menu

Wybór menu (wybierz jedną pozycję):

Wybór menu (trzymaj Ctrl lub Shift (lub przeciągnij myszą) aby wybrać wiele):

Jeśli chcesz umożliwić użytkownikom wybór z wielu opcji, użyj menu wyboru.

Aby ustawić styl menu wyboru w Bootstrap 5, dodaj .form-select Dodaj klasę do elementu <select>:

Przykład

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

Spróbuj sam

Rozmiar menu wyboru

Użyj .form-select-lg lub .form-select-sm Klasa zmienia rozmiar menu wyboru:

Przykład

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

Spróbuj sam

Wyłączenia menu wyboru

Użyj disabled Właściwość wyłączenia menu wyboru:

Przykład

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

Spróbuj sam

Lista danych

Bootstrap może również ustawić styl listy danych, która jest przewidzianą listą opcji dla elementu <input>:

Wybierz swoją przeglądarkę z listy:

Przykład

<label for="browser" class="form-label">Wybierz swoją przeglądarkę z listy:</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>

Spróbuj sam