Jatuh turun

Togol tindanan kontekstual untuk memaparkan senarai pautan dan banyak lagi dengan pemalam lungsur turun Bootstrap.

Pada halaman ini

Gambaran keseluruhan

Jatuh turun boleh togol, tindanan kontekstual untuk memaparkan senarai pautan dan banyak lagi. Ia dibuat interaktif dengan pemalam JavaScript lungsur Bootstrap yang disertakan. Mereka ditogol dengan mengklik, bukan dengan melayang; ini adalah keputusan reka bentuk yang disengajakan .

Dropdown dibina pada pustaka pihak ketiga, Popper , yang menyediakan pengesanan kedudukan dinamik dan port pandangan. Pastikan anda memasukkan popper.min.js sebelum JavaScript Bootstrap atau gunakan bootstrap.bundle.min.js/ bootstrap.bundle.jsyang mengandungi Popper. Popper tidak digunakan untuk meletakkan dropdown dalam bar navigasi walaupun kerana kedudukan dinamik tidak diperlukan.

Kebolehcapaian

Piawaian WAI ARIA mentakrifkan role="menu"widget sebenar , tetapi ini khusus untuk menu seperti aplikasi yang mencetuskan tindakan atau fungsi. Menu ARIA hanya boleh mengandungi item menu, item menu kotak semak, item menu butang radio, kumpulan butang radio dan sub-menu.

Sebaliknya, dropdown Bootstrap direka bentuk untuk menjadi generik dan boleh digunakan pada pelbagai situasi dan struktur penanda. Sebagai contoh, adalah mungkin untuk membuat lungsur turun yang mengandungi input tambahan dan kawalan borang, seperti medan carian atau borang log masuk. Atas sebab ini, Bootstrap tidak menjangkakan (atau menambah secara automatik) mana-mana atribut roledan yang diperlukan untuk menu ARIA sebenar. Pengarang perlu memasukkan atribut yang lebih khusus ini sendiri.aria-

Walau bagaimanapun, Bootstrap menambah sokongan terbina dalam untuk kebanyakan interaksi menu papan kekunci standard, seperti keupayaan untuk bergerak melalui .dropdown-itemelemen individu menggunakan kekunci kursor dan menutup menu dengan ESCkekunci.

Contoh

Balut togol lungsur turun (butang atau pautan anda) dan menu lungsur turun dalam .dropdown, atau elemen lain yang mengisytiharkan position: relative;. Jatuh turun boleh dicetuskan daripada <a>atau <button>unsur supaya lebih sesuai dengan potensi keperluan anda. Contoh yang ditunjukkan di sini menggunakan <ul>elemen semantik jika sesuai, tetapi penanda tersuai disokong.

Butang tunggal

Mana-mana single .btnboleh ditukar menjadi togol lungsur turun dengan beberapa perubahan markup. Begini cara anda boleh menjadikannya berfungsi dengan mana-mana <button>elemen:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Dan dengan <a>unsur:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Bahagian yang terbaik ialah anda boleh melakukan ini dengan mana-mana varian butang juga:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Butang belah

Begitu juga, buat menu lungsur butang pisah dengan penanda yang hampir sama dengan lungsur butang tunggal, tetapi dengan penambahan .dropdown-toggle-splituntuk jarak yang betul di sekeliling karet lungsur.

Kami menggunakan kelas tambahan ini untuk mengurangkan mendatar paddingpada kedua-dua sisi karet sebanyak 25% dan mengalih keluar kelas margin-leftyang ditambahkan untuk menu lungsur butang biasa. Perubahan tambahan tersebut memastikan karet berpusat pada butang belah dan menyediakan kawasan pukulan bersaiz lebih sesuai di sebelah butang utama.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Saiz

Butang lungsur turun berfungsi dengan butang semua saiz, termasuk butang lungsur lalai dan pisah.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Jatuh turun gelap

Ikut serta lungsur turun yang lebih gelap untuk memadankan bar navigasi gelap atau gaya tersuai dengan menambahkan .dropdown-menu-darkpada .dropdown-menu. Tiada perubahan diperlukan pada item lungsur turun.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Dan meletakkannya untuk digunakan dalam navbar:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Arah

RTL

Arah dicerminkan apabila menggunakan Bootstrap dalam RTL, bermakna .dropstartakan muncul di sebelah kanan.

Dropup

Cetuskan menu lungsur turun di atas elemen dengan menambah .dropuppada elemen induk.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropright

Cetuskan menu lungsur turun di sebelah kanan elemen dengan menambahkan .dropendpada elemen induk.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Titisan kiri

Cetuskan menu lungsur turun di sebelah kiri elemen dengan menambah .dropstartpada elemen induk.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Anda boleh menggunakan <a>atau <button>elemen sebagai item lungsur turun.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Anda juga boleh membuat item lungsur turun bukan interaktif dengan .dropdown-item-text. Jangan ragu untuk menggayakan lagi dengan CSS tersuai atau utiliti teks.

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Aktif

Tambahkan .activepada item dalam menu lungsur untuk menggayakannya sebagai aktif . Untuk menyampaikan keadaan aktif kepada teknologi bantuan, gunakan aria-currentatribut — menggunakan pagenilai untuk halaman semasa atau trueuntuk item semasa dalam set.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Dilumpuhkan

Tambahkan .disabledpada item dalam menu lungsur untuk menggayakannya sebagai dilumpuhkan .

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Secara lalai, menu lungsur turun secara automatik diletakkan 100% dari atas dan di sepanjang sebelah kiri induknya. Anda boleh menukar ini dengan .drop*kelas arah, tetapi anda juga boleh mengawalnya dengan kelas pengubah suai tambahan.

Tambahkan .dropdown-menu-endpada .dropdown-menujajaran ke kanan menu lungsur turun. Arah dicerminkan apabila menggunakan Bootstrap dalam RTL, bermakna .dropdown-menu-endakan muncul di sebelah kiri.

Angkat kepala! Dropdown diposisikan terima kasih kepada Popper kecuali apabila ia terkandung dalam bar navigasi.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Penjajaran responsif

Jika anda ingin menggunakan penjajaran responsif, lumpuhkan kedudukan dinamik dengan menambahkan data-bs-display="static"atribut dan gunakan kelas variasi responsif.

Untuk menjajarkan menu lungsur ke kanan.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end dengan titik putus yang diberikan atau lebih besar, tambahkan .

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Untuk menjajarkan menu lungsur ke kiri.dropdown-menu-end dengan titik putus yang diberikan atau lebih besar, tambah dan .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Ambil perhatian bahawa anda tidak perlu menambah data-bs-display="static"atribut pada butang lungsur turun dalam bar navigasi, kerana Popper tidak digunakan dalam bar navigasi.

Pilihan penjajaran

Mengambil kebanyakan pilihan yang ditunjukkan di atas, berikut ialah demo sink dapur kecil pelbagai pilihan penjajaran lungsur turun di satu tempat.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Pengepala

Tambahkan pengepala untuk melabel bahagian tindakan dalam mana-mana menu lungsur turun.

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Pembahagi

Asingkan kumpulan item menu yang berkaitan dengan pembahagi.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Teks

Letakkan sebarang teks bentuk bebas dalam menu lungsur turun dengan teks dan gunakan utiliti jarak . Ambil perhatian bahawa anda mungkin memerlukan gaya saiz tambahan untuk mengekang lebar menu.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Borang

Letakkan borang dalam menu lungsur turun, atau jadikannya sebagai menu lungsur turun, dan gunakan utiliti margin atau padding untuk memberikannya ruang negatif yang anda perlukan.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="mb-3">
    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Gunakan data-bs-offsetatau data-bs-referenceuntuk menukar lokasi lungsur turun.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Tingkah laku auto tutup

Secara lalai, menu lungsur ditutup apabila mengklik di dalam atau di luar menu lungsur. Anda boleh menggunakan autoClosepilihan untuk menukar tingkah laku lungsur turun ini.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Sass

Pembolehubah

Pembolehubah untuk semua dropdown:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($gray-900, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

Pembolehubah untuk dropdown gelap :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

Pembolehubah untuk karet berasaskan CSS yang menunjukkan interaktiviti lungsur turun:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

Campuran

Mixin digunakan untuk menjana karet berasaskan CSS dan boleh didapati dalam scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

Penggunaan

Melalui atribut data atau JavaScript, pemalam lungsur turun menogol kandungan tersembunyi (menu lungsur) dengan menogol .showkelas pada induk .dropdown-menu. Atribut data-bs-toggle="dropdown"ini bergantung kepada untuk menutup menu lungsur turun pada peringkat aplikasi, jadi adalah idea yang baik untuk sentiasa menggunakannya.

Pada peranti yang didayakan sentuhan, membuka menu lungsur menambah mouseoverpengendali kosong kepada anak-anak terdekat <body>unsur tersebut. Penggodaman yang diakui jelik ini diperlukan untuk mengatasi masalah dalam delegasi acara iOS , yang sebaliknya akan menghalang ketik di mana-mana di luar menu lungsur daripada mencetuskan kod yang menutup menu lungsur. Setelah menu lungsur ditutup, mouseoverpengendali kosong tambahan ini dialih keluar.

Melalui atribut data

Tambahkan data-bs-toggle="dropdown"pada pautan atau butang untuk menogol lungsur turun.

<div class="dropdown">
  <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Melalui JavaScript

Panggil lungsur turun melalui JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

`data-bs-toggle="dropdown"`masih diperlukan

Tidak kira sama ada anda memanggil lungsur turun melalui JavaScript atau sebaliknya menggunakan data-api, data-bs-toggle="dropdown"sentiasa diperlukan untuk hadir pada elemen pencetus lungsur turun.

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-bs-, seperti dalam data-bs-offset="". Pastikan anda menukar jenis kes bagi nama pilihan daripada camelCase kepada kebab-case apabila menghantar pilihan melalui atribut data. Sebagai contoh, daripada menggunakan data-bs-autoClose="false", gunakan data-bs-auto-close="false".

Nama	taip	Lalai	Penerangan
`boundary`	rentetan \| unsur	`'clippingParents'`	Sempadan kekangan limpahan menu lungsur (hanya digunakan pada pengubah suai preventOverflow Popper). Secara lalai ia `'clippingParents'`dan boleh menerima rujukan HTMLElement (melalui JavaScript sahaja). Untuk maklumat lanjut rujuk kepada Popper's detectOverflow docs .
`reference`	rentetan \| unsur \| objek	`'toggle'`	Elemen rujukan menu lungsur turun. Menerima nilai `'toggle'`, `'parent'`, rujukan HTMLElement atau objek yang menyediakan `getBoundingClientRect`. Untuk maklumat lanjut rujuk kepada dokumen pembina Popper dan dokumen elemen maya .
`display`	tali	`'dynamic'`	Secara lalai, kami menggunakan Popper untuk kedudukan dinamik. Lumpuhkan ini dengan `static`.
`offset`	tatasusunan \| rentetan \| fungsi	`[0, 2]`	Mengimbangi lungsur turun berbanding sasarannya. Anda boleh menghantar rentetan dalam atribut data dengan nilai dipisahkan koma seperti:`data-bs-offset="10,20"` Apabila fungsi digunakan untuk menentukan ofset, ia dipanggil dengan objek yang mengandungi peletakan popper, rujukan, dan popper rects sebagai hujah pertamanya. Nod DOM elemen pencetus diluluskan sebagai hujah kedua. Fungsi mesti mengembalikan tatasusunan dengan dua nombor: .`[skidding, distance]` Untuk maklumat lanjut rujuk kepada dokumen offset Popper .
`autoClose`	boolean \| tali	`true`	Konfigurasikan gelagat auto tutup menu lungsur: `true`- dropdown akan ditutup dengan mengklik di luar atau di dalam menu dropdown. `false`- lungsur turun akan ditutup dengan mengklik butang togol dan panggilan `hide`atau `toggle`kaedah secara manual. (Juga tidak akan ditutup dengan menekan `esc`kekunci) `'inside'`- dropdown akan ditutup (hanya) dengan mengklik di dalam menu dropdown. `'outside'`- dropdown akan ditutup (hanya) dengan mengklik di luar menu dropdown.
`popperConfig`	null \| objek \| fungsi	`null`	Untuk menukar konfigurasi Popper lalai Bootstrap, lihat konfigurasi Popper . Apabila fungsi digunakan untuk mencipta konfigurasi Popper, ia dipanggil dengan objek yang mengandungi konfigurasi Popper lalai Bootstrap. Ia membantu anda menggunakan dan menggabungkan lalai dengan konfigurasi anda sendiri. Fungsi mesti mengembalikan objek konfigurasi untuk Popper.

Menggunakan fungsi dengan`popperConfig`

var dropdown = new bootstrap.Dropdown(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Kaedah

Kaedah	Penerangan
`toggle`	Togol menu lungsur turun bar navigasi yang diberikan atau navigasi tab.
`show`	Menunjukkan menu lungsur turun bar navigasi tertentu atau navigasi tab.
`hide`	Menyembunyikan menu lungsur turun bar navigasi tertentu atau navigasi tab.
`update`	Mengemas kini kedudukan lungsur turun elemen.
`dispose`	Memusnahkan lungsur turun elemen. (Mengalih keluar data yang disimpan pada elemen DOM)
`getInstance`	Kaedah statik yang membolehkan anda mendapatkan contoh lungsur turun yang dikaitkan dengan elemen DOM, anda boleh menggunakannya seperti ini:`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	Kaedah statik yang mengembalikan contoh lungsur turun yang dikaitkan dengan elemen DOM atau mencipta yang baharu sekiranya ia tidak dimulakan. Anda boleh menggunakannya seperti ini:`bootstrap.Dropdown.getOrCreateInstance(element)`

Peristiwa

Semua acara lungsur turun dicetuskan pada elemen togol dan kemudian menggelembung. Jadi anda juga boleh menambah pendengar acara pada .dropdown-menuelemen induk '. hide.bs.dropdowndan hidden.bs.dropdownacara mempunyai clickEventsifat (hanya apabila jenis Acara asal ialah click) yang mengandungi Objek Acara untuk acara klik.

Kaedah	Penerangan
`show.bs.dropdown`	Menyala serta-merta apabila kaedah contoh tunjukkan dipanggil.
`shown.bs.dropdown`	Dicetuskan apabila lungsur turun telah dilihat kepada pengguna dan peralihan CSS telah selesai.
`hide.bs.dropdown`	Menyala serta-merta apabila kaedah contoh sembunyi telah dipanggil.
`hidden.bs.dropdown`	Dicetuskan apabila dropdown selesai disembunyikan daripada pengguna dan peralihan CSS telah selesai.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

Jatuh turun

Gambaran keseluruhan

Kebolehcapaian

Contoh

Butang tunggal

Butang belah

Saiz

Jatuh turun gelap

Arah

RTL

Dropup

Dropright

Titisan kiri

Item menu

Aktif

Dilumpuhkan

Penjajaran menu

Penjajaran responsif

Pilihan penjajaran

Kandungan menu

Pengepala

Pembahagi

Teks

Borang

Tingkah laku auto tutup

Sass

Pembolehubah

Campuran

Penggunaan

Melalui atribut data

Melalui JavaScript

`data-bs-toggle="dropdown"`masih diperlukan

Pilihan

Menggunakan fungsi dengan`popperConfig`

Kaedah

Peristiwa

Jatuh turun

Gambaran keseluruhan

Kebolehcapaian

Contoh

Butang tunggal

Butang belah

Saiz

Jatuh turun gelap

Arah

RTL

Dropup

Dropright

Titisan kiri

Item menu

Aktif

Dilumpuhkan

Penjajaran menu

Penjajaran responsif

Pilihan penjajaran

Kandungan menu

Pengepala

Tajuk jatuh turun

Pembahagi

Teks

Borang

Pilihan lungsur turun

Tingkah laku auto tutup

Sass

Pembolehubah

Campuran

Penggunaan

Melalui atribut data

Melalui JavaScript

data-bs-toggle="dropdown"masih diperlukan

Pilihan

Menggunakan fungsi denganpopperConfig

Kaedah

Peristiwa

`data-bs-toggle="dropdown"`masih diperlukan

Menggunakan fungsi dengan`popperConfig`