Daftar susun Bootstrap 5

Daftar susun dasar

Menu susun adalah menu yang dapat diubah, memungkinkan pengguna untuk memilih nilai dari daftar yang ditetapkan:

Example

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Tombol susun
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

Try It Yourself

Contoh penjelasan

.dropdown tanda kelas untuk menu susun.

Untuk membuka menu susun, gunakan yang diatur .dropdown-toggle class dan data-toggle="dropdown" atribut tombol atau tautan.

tambahkan .dropdown-menu class ke <div> elemen, dapat membangun menu pengambilan secara nyata. kemudian tambahkan .dropdown-item tambahkan class ke setiap elemen dalam menu pengambilan (tautan atau tombol).

Garis pemisah daftar pengambilan

.dropdown-divider class untuk memisahkan tautan dalam menu pengambilan dengan garis horizontal:

Example

<li><hr class="dropdown-divider"></hr></li>

Try It Yourself

Judul daftar pengambilan

.dropdown-header class untuk menambahkan judul dalam menu pengambilan:

Example

<li><h5 class="dropdown-header">Judul Dropdown 1</h5></li>

Try It Yourself

item yang dicekal dan yang aktif

Gunakan .active class untuk menandai item pengambilan khusus (menambahkan warna latar biru).

Untuk menonaktifkan salah satu item dalam daftar pengambilan, gunakan .disabled class (dapat memperoleh warna teks putih-keabuan dan ikon "no-parking-sign" saat dihover).

Example

<li><a class="dropdown-item" href="#">Biasa</a></li>
<li><a class="dropdown-item active" href="#">Aktif</a></li>
<li><a class="dropdown-item disabled" href="#">Diseaktikan</a></li>

Try It Yourself

lokasi daftar pengambilan

Anda juga dapat melalui menambahkan .dropend atau .dropstart tambahkan class ke elemen pengambilan untuk membuat menu "dropend" atau "dropstart". Perhatikan, tanda panah/panah akan ditambahkan otomatis:

Kanan

<div class="dropdown dropend">

Try It Yourself

Kiri

<div class="dropdown dropstart">

Try It Yourself

Daftar pengambilan kiri

Untuk menaruh kiri daftar pengambilan, tambahkan .dropdown-menu-end tambahkan class .dropdown-menu elemen:

Example

<div class="dropdown-menu dropdown-menu-end">

Try It Yourself

Daftar pengambilan ke atas

Jika Anda ingin menu dropdown terbuka ke atas daripada ke bawah, ubah elemen <div> dengan class="dropdown" menjadi "dropup":

Example

<div class="dropup">

Try It Yourself

Dropdown Text

.dropdown-item-text The class is used to add plain text to dropdown items, or to add default link styles to links.

Example

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
  <li><a class="dropdown-item-text" href="#">Text Link</a></li>
  <li><span class="dropdown-item-text">Plain Text</span></li>
</ul>

Try It Yourself

Combination of buttons and dropdown lists

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Phone</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Try It Yourself

Vertical combination of buttons and dropdown lists

Example

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Phone</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Try It Yourself