Menu Pilihan Bootstrap 5

Pilihan Menu

Pilihan Menu (pilih satu):

Pilihan Menu (tekan ctrl atau shift (atau geser dengan mouse) untuk memilih beberapa):

Jika Anda ingin memungkinkan pengguna untuk memilih beberapa opsi, gunakan pilihan daftar.

Untuk mengatur gaya pilihan daftar di Bootstrap 5, gunakan .form-select Tambahkan kelas ke elemen <select>:

Contoh

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

Coba Sendiri

Ukuran pilihan daftar

Gunakan .form-select-lg atau .form-select-sm Kelas untuk mengubah ukuran pilihan daftar:

Contoh

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

Coba Sendiri

Nonaktifkan pilihan daftar

Gunakan disabled Atribut untuk nonaktifkan pilihan daftar:

Contoh

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

Coba Sendiri

Daftar Data

Bootstrap dapat menata gaya daftar data, yang adalah daftar pilihan yang diatur untuk elemen <input>:

Pilih browser Anda dari daftar:

Contoh

<label for="browser" class="form-label">Pilih browser Anda dari daftar:</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>

Coba Sendiri