Daftar dropdown Bootstrap 5

Daftar dropdown dasar

Menu dropdown adalah menu yang dapat dijalankan, memungkinkan pengguna untuk memilih nilai dari daftar yang ditetapkan:

Contoh

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

Coba sendiri

Contoh penjelasan

.dropdown tanda keterangan menu dropdown.

Untuk membuka menu dropdown, silakan gunakan yang disetel .dropdown-toggle kelas dan data-toggle="dropdown" property

atur butang atau pautan .dropdown-menu kelas ke <div> elemen, dapat menggambarkan menu turun sebenar. kemudian tambahkan .dropdown-item kelas ditambahkan ke setiap elemen di menu turun (pautan atau butang).

Bingkai pemisah menu turun

.dropdown-divider kelas untuk memisahkan pautan di menu turun dengan bingkai nipis horizontal:

Contoh

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

Coba sendiri

Tajuk menu turun

.dropdown-header kelas untuk menambah tajuk di menu turun:

Contoh

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

Coba sendiri

item yang dibenarkan dan aktif

Guna .active kelas untuk menonjolkan item turun yang tertentu (menambah warna latar kékabun).

Untuk menghindari item menu turun, gunakan .disabled kelas (diperoleh warna teks kelabu ringan dan ikon "no-parking-sign" ketika diarahkan).

Contoh

<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="#">Dib禁用</a></li>

Coba sendiri

lokasi menu turun

Anda juga boleh melalui menambahkan .dropend atau .dropstart Tambahkan kelas ke elemen turun naik, untuk membuat menu "dropend" atau "dropstart". Perhatikan, tanda panah adalah ditambahkan secara otomatis:

Kanan turun

<div class="dropdown dropend">

Coba sendiri

Kiri turun

<div class="dropdown dropstart">

Coba sendiri

Menu turun ke kanan

Untuk menyusun menu turun ke kanan, sila ubah .dropdown-menu-end tambahkan kelas .dropdown-menu element:

Contoh

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

Coba sendiri

Turun naik

Jika anda mahu menu turun mendorong ke atas bukannya ke bawah, sila ubah elemen <div> dengan class="dropdown" "dropup"：

Contoh

<div class="dropup">

Coba sendiri

Teks turun

.dropdown-item-text Kelas digunakan untuk menambahkan teks biasa ke item turun, atau untuk menambahkan gaya pautan baku ke pautan.

Contoh

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Pautan 1</a></li>
  <li><a class="dropdown-item" href="#">Pautan 2</a></li>
  <li><a class="dropdown-item" href="#">Pautan 3</a></li>
  <li><a class="dropdown-item-text" href="#">Pautan teks</a></li>
  <li><span class="dropdown-item-text">Teks biasa</span></li>
</ul>

Coba sendiri

Kombinasi tombol dan daftar turun

Contoh

<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="#">Ponsel</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Coba sendiri

Kombinasi tombol beraturan dan daftar turun

Contoh

<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="#">Ponsel</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Coba sendiri