Pilihan Daftar Bootstrap 5

Pilihan menu

Pilihan menu (pilih satu):

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

Jika anda mahu memungkinkan pengguna untuk memilih daripada berbagai pilihan, gunakan pilihan daftar.

Untuk menetapkan gaya pilihan daftar di Bootstrap 5, sila gunakan .form-select Kelas ditambah ke elemen <select>:

Contoh

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

Coba sendiri

Saiz pilihan daftar

Guna .form-select-lg atau .form-select-sm Kelas untuk mengubah saiz pilihan daftar:

Contoh

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

Coba sendiri

Tutup pilihan daftar

Guna disabled Sifat pilihan daftar ditutup:

Contoh

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

Coba sendiri

Senarai data

Bootstrap boleh tetapkan gaya senarai data, yang adalah senarai pilihan pradefinisi bagi elemen <input>:

Pilih pelayar anda dari senarai:

Contoh

<label for="browser" class="form-label">Pilih pelayar anda dari senarai:</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