ເລື່ອນລົງ

ສະຫຼັບການວາງຊ້ອນຕາມບໍລິບົດເພື່ອສະແດງລາຍການລິ້ງ ແລະອື່ນໆອີກດ້ວຍ plugin dropdown Bootstrap.

ໃນໜ້ານີ້

ພາບລວມ

ເລື່ອນລົງແມ່ນສາມາດສະຫຼັບໄດ້, ການວາງຊ້ອນກັນຕາມບໍລິບົດເພື່ອສະແດງລາຍຊື່ຂອງລິ້ງ ແລະອື່ນໆອີກ. ພວກມັນຖືກສ້າງປະຕິສຳພັນກັບປລັກອິນ JavaScript ແບບເລື່ອນລົງຂອງ Bootstrap. ພວກມັນຖືກສະຫຼັບໂດຍການຄລິກ, ບໍ່ແມ່ນໂດຍການເລື່ອນ; ນີ້ແມ່ນ ການຕັດສິນໃຈອອກແບບໂດຍເຈດຕະນາ .

Dropdowns ຖືກສ້າງຂຶ້ນໃນຫ້ອງສະຫມຸດພາກສ່ວນທີສາມ, Popper , ເຊິ່ງສະຫນອງການຈັດຕໍາແຫນ່ງແບບເຄື່ອນໄຫວແລະການກວດສອບ viewport. ໃຫ້ແນ່ໃຈວ່າລວມເອົາ popper.min.js ກ່ອນ JavaScript ຂອງ Bootstrap ຫຼືໃຊ້ bootstrap.bundle.min.js/ bootstrap.bundle.jsທີ່ມີ Popper. Popper ບໍ່ໄດ້ຖືກນໍາໃຊ້ເພື່ອຈັດຕໍາແຫນ່ງ dropdowns ໃນ navbars ເຖິງແມ່ນວ່າການວາງຕໍາແຫນ່ງແບບເຄື່ອນໄຫວແມ່ນບໍ່ຈໍາເປັນ.

ການເຂົ້າເຖິງ

ມາດ ຕະ ຖານ WAI ARIA ກໍານົດ role="menu"widget ຕົວຈິງ , ແຕ່ນີ້ແມ່ນສະເພາະກັບເມນູທີ່ຄ້າຍຄືຄໍາຮ້ອງສະຫມັກທີ່ຈະກະຕຸ້ນການປະຕິບັດຫຼືຫນ້າທີ່. ເມນູ ARIA ສາມາດມີພຽງແຕ່ລາຍການເມນູ, ລາຍການເມນູກ່ອງກາໝາຍ, ລາຍການເມນູປຸ່ມວິທະຍຸ, ກຸ່ມປຸ່ມວິທະຍຸ ແລະເມນູຍ່ອຍ.

ໃນທາງກົງກັນຂ້າມ, ການຫຼຸດລົງຂອງ Bootstrap ໄດ້ຖືກອອກແບບເພື່ອໃຫ້ເປັນແບບທົ່ວໄປແລະໃຊ້ໄດ້ກັບຫຼາຍໆສະຖານະການແລະໂຄງສ້າງເຄື່ອງຫມາຍ. ຕົວຢ່າງ, ມັນເປັນໄປໄດ້ທີ່ຈະສ້າງ dropdowns ທີ່ມີ inputs ເພີ່ມເຕີມແລະການຄວບຄຸມແບບຟອມ, ເຊັ່ນ: ຊ່ອງຄົ້ນຫາຫຼືແບບຟອມເຂົ້າສູ່ລະບົບ. ສໍາລັບເຫດຜົນນີ້, Bootstrap ບໍ່ໄດ້ຄາດຫວັງ (ຫຼືເພີ່ມອັດຕະໂນມັດ) ໃດໆ roleແລະ aria-ຄຸນລັກສະນະທີ່ຕ້ອງການສໍາລັບ ເມນູ ARIA ທີ່ແທ້ຈິງ. ຜູ້ຂຽນຈະຕ້ອງລວມເອົາຄຸນລັກສະນະສະເພາະເຫຼົ່ານີ້ດ້ວຍຕົນເອງ.

ຢ່າງໃດກໍຕາມ, Bootstrap ເພີ່ມການສະຫນັບສະຫນູນໃນຕົວສໍາລັບການໂຕ້ຕອບຂອງເມນູແປ້ນພິມມາດຕະຖານສ່ວນໃຫຍ່, ເຊັ່ນ: ຄວາມສາມາດໃນການຍ້າຍຜ່ານ .dropdown-itemອົງປະກອບສ່ວນບຸກຄົນໂດຍໃຊ້ປຸ່ມຕົວກະພິບແລະປິດເມນູດ້ວຍ ESCປຸ່ມ.

ຕົວຢ່າງ

ຫໍ່ປິດສະຫຼັບຂອງແບບເລື່ອນລົງ (ປຸ່ມ ຫຼືລິ້ງຂອງທ່ານ) ແລະເມນູເລື່ອນລົງພາຍໃນ .dropdown, ຫຼືອົງປະກອບອື່ນທີ່ປະກາດ position: relative;. Dropdowns ສາມາດຖືກກະຕຸ້ນຈາກ <a>ຫຼື <button>ອົງປະກອບເພື່ອໃຫ້ເຫມາະສົມກັບຄວາມຕ້ອງການທີ່ເປັນໄປໄດ້ຂອງທ່ານ. ຕົວຢ່າງທີ່ສະແດງຢູ່ນີ້ໃຊ້ອົງປະກອບ semantic <ul>ທີ່ເຫມາະສົມ, ແຕ່ເຄື່ອງຫມາຍ custom ສະຫນັບສະຫນູນ.

ປຸ່ມດຽວ

ອັນໃດອັນໜຶ່ງ .btnສາມາດປ່ຽນເປັນປຸ່ມສະຫຼັບແບບເລື່ອນລົງໄດ້ ໂດຍມີການປ່ຽນແປງເຄື່ອງໝາຍບາງອັນ. ນີ້ແມ່ນວິທີທີ່ເຈົ້າສາມາດເຮັດໃຫ້ພວກມັນເຮັດວຽກກັບ <button>ອົງປະກອບທັງສອງຢ່າງ:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
  </ul>
</div>

ແລະມີ <a>ອົງປະກອບ:

html

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

  <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>
  </ul>
</div>

ສ່ວນທີ່ດີທີ່ສຸດແມ່ນທ່ານສາມາດເຮັດສິ່ງນີ້ກັບຕົວແປປຸ່ມໃດໆ, ເຊັ່ນກັນ:

<!-- 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>

ປຸ່ມແຍກ

ເຊັ່ນດຽວກັນ, ສ້າງການເລື່ອນລົງປຸ່ມທີ່ແບ່ງອອກໂດຍມີເຄື່ອງຫມາຍ virtually ຄືກັນກັບການເລື່ອນລົງປຸ່ມດຽວ, ແຕ່ມີການເພີ່ມເຕີມ .dropdown-toggle-splitສໍາລັບຊ່ອງຫວ່າງທີ່ເຫມາະສົມປະມານແຖບເລື່ອນລົງ.

ພວກເຮົາໃຊ້ຊັ້ນຮຽນພິເສດນີ້ເພື່ອຫຼຸດແນວນອນ paddingຢູ່ດ້ານໃດຂ້າງຂອງຄາບໄວ້ 25% ແລະເອົາອັນ margin-leftທີ່ເພີ່ມມາສຳລັບການເລື່ອນລົງປຸ່ມປົກກະຕິ. ການປ່ຽນແປງພິເສດເຫຼົ່ານັ້ນເຮັດໃຫ້ຄາບຕິດຢູ່ກາງປຸ່ມແຍກ ແລະໃຫ້ພື້ນທີ່ຕີຂະໜາດທີ່ເໝາະສົມກວ່າຢູ່ຂ້າງປຸ່ມຫຼັກ.

<!-- 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>

ຂະໜາດ

ປຸ່ມເລື່ອນລົງເຮັດວຽກກັບປຸ່ມທຸກຂະໜາດ, ລວມທັງປຸ່ມແບບເລື່ອນລົງແບບເລີ່ມຕົ້ນ ແລະການແບ່ງປັນ.

<!-- 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>

ເລື່ອນລົງຊ້ໍາ

ເລືອກເຂົ້າໄປໃນແບບເລື່ອນລົງທີ່ມືດກວ່າເພື່ອໃຫ້ກົງກັບແຖບ navbar ມືດ ຫຼືຮູບແບບກຳນົດເອງໂດຍການເພີ່ມ .dropdown-menu-darkໃສ່ໃນທີ່ມີຢູ່ແລ້ວ .dropdown-menu. ບໍ່ຈຳເປັນຕ້ອງມີການປ່ຽນແປງຕໍ່ກັບລາຍການແບບເລື່ອນລົງ.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <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>

ແລະວາງມັນເພື່ອໃຊ້ໃນແຖບ navbar:

html

<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <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>

ທິດທາງ

RTL

ທິດທາງແມ່ນສະທ້ອນເມື່ອໃຊ້ Bootstrap ໃນ RTL, ຄວາມຫມາຍ .dropstartຈະປາກົດຢູ່ເບື້ອງຂວາ.

ກາງ

ເຮັດໃຫ້ເມນູແບບເລື່ອນລົງຢູ່ກາງທາງລຸ່ມຂອງສະຫຼັບກັບ .dropdown-centerອົງປະກອບຫຼັກ.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

ເລື່ອນລົງ

ກະຕຸ້ນເມນູແບບເລື່ອນລົງຂ້າງເທິງອົງປະກອບໂດຍການເພີ່ມ .dropupໃສ່ອົງປະກອບຫຼັກ.

<!-- 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>

ວາງໄວ້ກາງ

ເຮັດໃຫ້ເມນູເລື່ອນຂຶ້ນຢູ່ເຄິ່ງກາງຂ້າງເທິງສະຫຼັບກັບ .dropup-centerອົງປະກອບຫຼັກ.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

ລຸດລົງ

ກະຕຸ້ນເມນູແບບເລື່ອນລົງຢູ່ເບື້ອງຂວາຂອງອົງປະກອບໂດຍການເພີ່ມ .dropendໃສ່ອົງປະກອບຫຼັກ.

<!-- Default dropend button -->
<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">
    <!-- 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 Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropstart

ກະຕຸ້ນເມນູແບບເລື່ອນລົງທາງຊ້າຍຂອງອົງປະກອບໂດຍການເພີ່ມ .dropstartໃສ່ອົງປະກອບຫຼັກ.

<!-- 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 dropstart">
  <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>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

ທ່ານສາມາດນໍາໃຊ້ <a>ຫຼື <button>ອົງປະກອບເປັນລາຍການແບບເລື່ອນລົງ.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <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>

ນອກນັ້ນທ່ານຍັງສາມາດສ້າງລາຍການແບບເລື່ອນລົງທີ່ບໍ່ມີການໂຕ້ຕອບກັບ .dropdown-item-text. ຮູ້ສຶກບໍ່ເສຍຄ່າທີ່ຈະຈັດຮູບແບບເພີ່ມເຕີມດ້ວຍ CSS ແບບກຳນົດເອງ ຫຼືເຄື່ອງໃຊ້ຂໍ້ຄວາມ.

html

<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>

ເຄື່ອນໄຫວ

ເພີ່ມ .activeໃສ່ລາຍການໃນລາຍການແບບເລື່ອນລົງເພື່ອຈັດ ຮູບແບບພວກມັນເປັນການເຄື່ອນໄຫວ . ເພື່ອບົ່ງບອກສະຖານະການເຄື່ອນໄຫວໃຫ້ກັບເທັກໂນໂ��ຍີຊ່ວຍເຫຼືອ, ໃຫ້ໃຊ້ aria-currentຄຸນສົມບັດ — ໂດຍໃຊ້ pageຄ່າສຳລັບໜ້າປັດຈຸບັນ ຫຼື trueສຳລັບລາຍການປັດຈຸບັນໃນຊຸດໃດໜຶ່ງ.

html

<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>

ຄົນພິການ

ເພີ່ມ .disabledໃສ່ລາຍການໃນເມນູເລື່ອນລົງເພື່ອຈັດ ຮູບແບບພວກມັນເປັນປິດໃຊ້ງານ .

html

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

ໂດຍຄ່າເລີ່ມຕົ້ນ, ເມນູເລື່ອນລົງຈະຖືກຈັດວາງໂດຍອັດຕະໂນມັດ 100% ຈາກດ້ານເທິງ ແລະທາງຊ້າຍຂອງພໍ່ແມ່ຂອງມັນ. ທ່ານສາມາດມີການປ່ຽນແປງນີ້ກັບ .drop*ຫ້ອງຮຽນທິດທາງ, ແຕ່ວ່າທ່ານຍັງສາມາດຄວບຄຸມພວກເຂົາດ້ວຍຫ້ອງຮຽນການປັບປຸງເພີ່ມເຕີມ.

ຕື່ມການໃສ່ .dropdown-menu-endໄປ .dropdown-menuທາງຂວາຈັດວາງເມນູແບບເລື່ອນລົງ. ທິດທາງແມ່ນສະທ້ອນເມື່ອໃຊ້ Bootstrap ໃນ RTL, ຄວາມຫມາຍ .dropdown-menu-endຈະປາກົດຢູ່ເບື້ອງຊ້າຍ.

ລະວັງ! Dropdowns ແມ່ນຖືກຈັດໃສ່ຍ້ອນ Popper ຍົກເວັ້ນເວລາທີ່ພວກມັນຖືກບັນຈຸຢູ່ໃນແຖບ navbar.

html

<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>

ການຈັດຕໍາແຫນ່ງທີ່ຕອບສະຫນອງ

ຖ້າທ່ານຕ້ອງການໃຊ້ການຈັດຮຽງແບບຕອບສະໜອງ, ໃຫ້ປິດການຈັດຕຳແໜ່ງແບບໄດນາມິກໂດຍການເພີ່ມ data-bs-display="static"ຄຸນສົມບັດ ແລະໃຊ້ຫ້ອງຮຽນການປ່ຽນແປງທີ່ຕອບສະໜອງ.

ເພື່ອຈັດຮຽງ ເມນູແບບເລື່ອນລົງໃຫ້ ຖືກຕ້ອງ ກັບຈຸດແບ່ງທີ່ໃຫ້ ຫຼືໃຫຍ່ກວ່າ, ໃຫ້ເພີ່ມ .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<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>

ເພື່ອຈັດຮຽງ ຊ້າຍ ເມນູແບບເລື່ອນລົງດ້ວຍຈຸດແບ່ງທີ່ໃຫ້ ຫຼືໃຫຍ່ກວ່າ, ເພີ່ມ .dropdown-menu-endແລະ .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<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>

ໃຫ້ສັງເກດວ່າທ່ານບໍ່ຈໍາເປັນຕ້ອງເພີ່ມ data-bs-display="static"ຄຸນລັກສະນະຂອງປຸ່ມເລື່ອນລົງໃນແຖບ navbars, ເພາະວ່າ Popper ບໍ່ໄດ້ຖືກນໍາໃຊ້ໃນ navbars.

ຕົວເລືອກການຈັດຮຽງ

ເອົາຕົວເລືອກສ່ວນໃຫຍ່ທີ່ສະແດງຂ້າງເທິງ, ນີ້ແມ່ນຕົວຢ່າງການຫລົ້ມຈົມເຮືອນຄົວຂະຫນາດນ້ອຍຂອງທາງເລືອກການຈັດຕໍາແຫນ່ງແບບເລື່ອນລົງໃນບ່ອນດຽວ.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </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">
  <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>

ສ່ວນຫົວ

ເພີ່ມສ່ວນຫົວໃສ່ປ້າຍກຳກັບພາກສ່ວນຂອງຄຳສັ່ງຢູ່ໃນເມນູແບບເລື່ອນລົງໃດໆກໍຕາມ.

html

<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>

ສ່ວນແບ່ງ

ແຍກກຸ່ມຂອງລາຍການເມນູທີ່ກ່ຽວຂ້ອງດ້ວຍຕົວແບ່ງ.

html

<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>

ຂໍ້ຄວາມ

ວາງຂໍ້ຄວາມແບບບໍ່ເສຍຄ່າໃດນຶ່ງພາຍໃນເມນູແບບເລື່ອນລົງດ້ວຍຂໍ້ຄວາມ ແລະໃຊ້ເຄື່ອງມືທີ່ ມີຊ່ອງຫວ່າງ . ກະລຸນາຮັບຊາບວ່າທ່ານອາດຈະຕ້ອງການຮູບແບບຂະໜາດເພີ່ມເຕີມເພື່ອຈຳກັດຄວາມກວ້າງຂອງເມນູ.

html

<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>

ແບບຟອມ

ໃສ່ແບບຟອມພາຍໃນເມນູແບບເລື່ອນລົງ, ຫຼືເຮັດໃຫ້ມັນເຂົ້າໄປໃນເມນູແບບເລື່ອນລົງ, ແລະໃຊ້ ຂອບຫຼື ອຸປະກອນ ເສີມເພື່ອໃຫ້ມັນມີພື້ນທີ່ລົບທີ່ທ່ານຕ້ອງການ.

html

<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>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <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>
</div>

ໃຊ້ data-bs-offsetຫຼື data-bs-referenceປ່ຽນສະຖານທີ່ຂອງ dropdown ໄດ້.

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </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>
    </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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <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>
</div>

ພຶດຕິກໍາການປິດອັດຕະໂນມັດ

ໂດຍຄ່າເລີ່ມຕົ້ນ, ເມນູແບບເລື່ອນລົງຈະຖືກປິດເມື່ອຄລິກໃສ່ພາຍໃນຫຼືພາຍນອກເມນູແບບເລື່ອນລົງ. ທ່ານສາມາດນໍາໃຊ້ autoCloseທາງເລືອກໃນການປ່ຽນແປງພຶດຕິກໍາຂອງ dropdown ນີ້.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </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>

CSS

ຕົວແປ

ເພີ່ມໃນ v5.2.0

ເປັນສ່ວນຫນຶ່ງຂອງວິທີການຕົວແປ CSS ທີ່ພັດທະນາຂອງ Bootstrap, ການຫຼຸດລົງໃນປັດຈຸບັນໃຊ້ຕົວແປ CSS ທ້ອງຖິ່ນ .dropdown-menuສໍາລັບການປັບແຕ່ງເວລາທີ່ແທ້ຈິງ. ຄ່າສໍາລັບຕົວແປ CSS ແມ່ນຖືກກໍານົດຜ່ານ Sass, ດັ່ງນັ້ນການປັບແຕ່ງ Sass ຍັງຖືກສະຫນັບສະຫນູນ, ເຊັ່ນກັນ.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

ການປັບແຕ່ງໂດຍຜ່ານຕົວແປ CSS ສາມາດເຫັນໄດ້ໃນ .dropdown-menu-darkຫ້ອງຮຽນທີ່ພວກເຮົາ override ຄ່າສະເພາະໂດຍບໍ່ມີການເພີ່ມຕົວເລືອກ CSS ທີ່ຊ້ໍາກັນ.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

ຕົວແປ Sass

ຕົວແປສຳລັບການເລື່ອນລົງທັງໝົດ:

$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:             var(--#{$prefix}border-color-translucent);
$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($dropdown-link-color, 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-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

ຕົວແປສໍາລັບການ ເລື່ອນລົງຊ້ໍາ :

$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;

ຕົວແປສໍາລັບ CSS-based carets ທີ່ຊີ້ໃຫ້ເຫັນການໂຕ້ຕອບຂອງ dropdown:

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

ມິກຊິນ

Mixins ຖືກນໍາໃຊ້ເພື່ອສ້າງ carets ທີ່ອີງໃສ່ CSS ແລະສາມາດພົບເຫັນຢູ່ໃນ 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;
    }
  }
}

ການນໍາໃຊ້

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ ຫຼື JavaScript, ປລັກອິນແບບເລື່ອນລົງຈະສະຫຼັບເນື້ອຫາທີ່ເຊື່ອງໄວ້ (ເມນູແບບເລື່ອນລົງ) ໂດຍການສະຫຼັບ .showຊັ້ນຮຽນຢູ່ເທິງຫຼັກ .dropdown-menu. ຄຸນລັກ ສະ data-bs-toggle="dropdown"ນະແມ່ນອີງໃສ່ການປິດເມນູແບບເລື່ອນລົງໃນລະດັບແອັບພລິເຄຊັນ, ສະນັ້ນມັນເປັນຄວາມຄິດທີ່ດີທີ່ຈະໃຊ້ມັນຕະຫຼອດເວລາ.

ໃນອຸປະກອນທີ່ເປີດໃຊ້ການສໍາພັດ, ການເປີດແບບເລື່ອນລົງຈະເພີ່ມຕົວຈັດການຫວ່າງເປົ່າ mouseoverໃຫ້ກັບ ອົງປະກອບຂອງ <body>ອົງປະກອບ. ການ hack ທີ່ຫນ້າກຽດທີ່ຍອມຮັບນີ້ແມ່ນມີຄວາມຈໍາເປັນເພື່ອເຮັດວຽກຮອບໆ quirk ໃນ iOS' event delegation , ເຊິ່ງຖ້າບໍ່ດັ່ງນັ້ນຈະປ້ອງກັນການປາດຈາກບ່ອນໃດກໍ່ຕາມຢູ່ນອກ dropdown ຈາກການກະຕຸ້ນລະຫັດທີ່ປິດ dropdown ໄດ້. ເມື່ອ dropdown ໄດ້ຖືກປິດ, mouseoverhandlers ຫວ່າງເພີ່ມເຕີມເຫຼົ່ານີ້ໄດ້ຖືກໂຍກຍ້າຍອອກ.

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ເພີ່ມ data-bs-toggle="dropdown"ໃສ່ລິ້ງ ຫຼືປຸ່ມເພື່ອສະຫຼັບການເລື່ອນລົງ.

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

ຜ່ານ JavaScript

ໂທຫາ dropdowns ຜ່ານ JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`ຍັງຕ້ອງການ

ບໍ່ວ່າທ່ານຈະໂທຫາ dropdown ຂອງທ່ານຜ່ານ JavaScript ຫຼືແທນທີ່ຈະໃຊ້ data-api, data-bs-toggle="dropdown"ສະເຫມີຈໍາເປັນຕ້ອງມີຢູ່ໃນອົງປະກອບ trigger ຂອງ dropdown.

ທາງເລືອກ

ເນື່ອງຈາກທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript, ທ່ານສາມາດເພີ່ມຊື່ທາງເລືອກໃສ່ data-bs-, ດັ່ງໃນ data-bs-animation="{value}". ໃຫ້ແນ່ໃຈວ່າປ່ຽນປະເພດກໍລະນີຂອງຊື່ທາງເລືອກຈາກ " camelCase " ເປັນ " kebab-case " ເມື່ອຖ່າຍທອດທາງເລືອກຜ່ານຄຸນລັກສະນະຂໍ້ມູນ. ຕົວຢ່າງ, ໃຊ້ data-bs-custom-class="beautifier"ແທນ data-bs-customClass="beautifier".

ໃນຖານະເປັນຂອງ Bootstrap 5.2.0, ອົງປະກອບທັງຫມົດສະຫນັບສະຫນູນ ຄຸນລັກສະນະຂໍ້ມູນທີ່ສະຫງວນໄວ້ສໍາ ລັບ ການທົດລອງdata-bs-config ທີ່ສາມາດຈັດການຕັ້ງຄ່າອົງປະກອບງ່າຍດາຍເປັນ JSON string. ເມື່ອອົງປະກອບມີ data-bs-config='{"delay":0, "title":123}'ແລະ data-bs-title="456"ຄຸນລັກສະນະ, ຄ່າສຸດທ້າຍ titleຈະເປັນ 456ແລະຄຸນລັກສະນະຂອງຂໍ້ມູນແຍກຕ່າງຫາກຈະ override ຄ່າທີ່ໃຫ້ຢູ່ໃນ data-bs-config. ນອກຈາກນັ້ນ, ຄຸນລັກສະນະຂໍ້ມູນທີ່ມີຢູ່ແມ່ນສາມາດຈັດວາງຄ່າ JSON ເຊັ່ນ data-bs-delay='{"show":0,"hide":150}'.

ຊື່	ປະເພດ	ຄ່າເລີ່ມຕົ້ນ	ລາຍລະອຽດ
`autoClose`	boolean, string	`true`	ຕັ້ງຄ່າພຶດຕິກໍາການປິດອັດຕະໂນມັດຂອງ dropdown: `true`- ເລື່ອນລົງຈະຖືກປິດໂດຍການຄລິກໃສ່ພາຍນອກຫຼືພາຍໃນເມນູເລື່ອນລົງ. `false`- ເລື່ອນລົງຈະຖືກປິດໂດຍການຄລິກໃສ່ປຸ່ມສະຫຼັບແລະການໂທດ້ວຍຕົນເອງ `hide`ຫຼື `toggle`ວິທີການ. (ຍັງຈະບໍ່ຖືກປິດໂດຍການກົດປຸ່ມ `esc`) `'inside'`- ເລື່ອນລົງຈະຖືກປິດ (ພຽງແຕ່) ໂດຍການຄລິກໃສ່ພາຍໃນເມນູເລື່ອນລົງ. `'outside'`- ເລື່ອນລົງຈະຖືກປິດ (ພຽງແຕ່) ໂດຍການຄລິກໃສ່ຢູ່ນອກເມນູເລື່ອນລົງ. ໝາຍເຫດ: ແຖບເລື່ອນລົງສາມາດປິດດ້ວຍກະ `ESC`ແຈໄດ້ສະເໝີ.
`boundary`	string, ອົງປະກອບ	`'clippingParents'`	ຂອບເຂດຈໍາກັດ overflow ຂອງເມນູແບບເລື່ອນລົງ (ໃຊ້ກັບຕົວແກ້ໄຂການປ້ອງກັນການ overflow ຂອງ Popper ເທົ່ານັ້ນ). ໂດຍຄ່າເລີ່ມຕົ້ນມັນເປັນ `clippingParents`ແລະສາມາດຍອມຮັບການອ້າງອີງ HTMLElement (ຜ່ານ JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານ detectOverflow ຂອງ Popper .
`display`	ສາຍ	`'dynamic'`	ໂດຍຄ່າເລີ່ມຕົ້ນ, ພວກເຮົາໃຊ້ Popper ສໍາລັບການຈັດຕໍາແຫນ່ງແບບເຄື່ອນໄຫວ. ປິດການໃຊ້ງານນີ້ດ້ວຍ `static`.
`offset`	array, string, function	`[0, 2]`	ຊົດເຊີຍຂອງການຫຼຸດລົງທຽບກັບເປົ້າຫມາຍຂອງມັນ. ທ່ານສາມາດຖ່າຍທອດສະຕຣິງໃນຄຸນລັກສະນະຂໍ້ມູນດ້ວຍຄ່າທີ່ແຍກດ້ວຍເຄື່ອງໝາຍຈຸດເຊັ່ນ: `data-bs-offset="10,20"`. ເມື່ອຟັງຊັນຖືກນໍາໃຊ້ເພື່ອກໍານົດການຊົດເຊີຍ, ມັນຖືກເອີ້ນວ່າວັດຖຸທີ່ມີການຈັດວາງ popper, ການອ້າງອີງ, ແລະ popper rects ເປັນການໂຕ້ຖຽງທໍາອິດຂອງມັນ. ອົງປະກອບກະຕຸ້ນ DOM node ແມ່ນຜ່ານເປັນອາກິວເມັນທີສອງ. ຟັງຊັນຕ້ອງສົ່ງຄືນ array ທີ່ມີສອງຕົວເລກ: skidding , distance . ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper .
`popperConfig`	null, object, function	`null`	ເພື່ອປ່ຽນການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap, ເບິ່ງ ການຕັ້ງຄ່າຂອງ Popper . ເມື່ອຟັງຊັນຖືກໃຊ້ເພື່ອສ້າງການຕັ້ງຄ່າ Popper, ມັນຖືກເອີ້ນດ້ວຍວັດຖຸທີ່ມີການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap. ມັນຊ່ວຍໃຫ້ທ່ານໃຊ້ແລະລວມຄ່າເລີ່ມຕົ້ນກັບການຕັ້ງຄ່າຂອງທ່ານເອງ. ຟັງຊັນຕ້ອງສົ່ງຄືນວັດຖຸການຕັ້ງຄ່າສໍາລັບ Popper.
`reference`	string, ອົງປະກອບ, ວັດຖຸ	`'toggle'`	ອົງປະກອບອ້າງອີງຂອງເມນູເລື່ອນລົງ. ຍອມຮັບຄ່າຂອງ `'toggle'`, `'parent'`, ການອ້າງອີງ HTMLElement ຫຼືວັດຖຸທີ່ໃຫ້ `getBoundingClientRect`. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມໃຫ້ເບິ່ງທີ່ Docs constructor ຂອງ Popper ແລະ ເອກະສານ ອົງປະກອບ virtual .

ການນໍາໃຊ້ຟັງຊັນທີ່ມີ`popperConfig`

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

ວິທີການ

ວິທີການ	ລາຍລະອຽດ
`dispose`	ທໍາລາຍການເລື່ອນລົງຂອງອົງປະກອບ. (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM)
`getInstance`	ວິທີການຄົງທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງແບບເລື່ອນລົງທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້ `bootstrap.Dropdown.getInstance(element)`:
`getOrCreateInstance`	ວິທີການຄົງທີ່ທີ່ຈະສົ່ງຄືນຕົວຢ່າງແບບເລື່ອນລົງທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM ຫຼືສ້າງອັນໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ. ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	ເຊື່ອງເມນູແບບເລື່ອນລົງຂອງແຖບນຳທາງທີ່ກຳນົດໄວ້ ຫຼືການນຳທາງແຖບ.
`show`	ສະແດງໃຫ້ເຫັນເມນູເລື່ອນລົງຂອງ navbar ທີ່ໃຫ້ຫຼືການນໍາທາງແຖບ.
`toggle`	ສະຫຼັບເມນູແບບເລື່ອນລົງຂອງແຖບນຳທາງທີ່ລະບຸ ຫຼືການນຳທາງແຖບ.
`update`	ອັບເດດຕຳແໜ່ງການເລື່ອນລົງຂອງອົງປະກອບໃດໜຶ່ງ.

ເຫດການ

ເຫດການແບບເລື່ອນລົງທັງໝົດຈະຖືກຍິງໃສ່ອົງປະກອບສະຫຼັບ ແລະ ຈາກນັ້ນກໍ່ເກີດຟອງຂຶ້ນ. ດັ່ງນັ້ນ, ທ່ານຍັງສາມາດເພີ່ມຜູ້ຟັງເຫດການຢູ່ໃນ .dropdown-menuອົງປະກອບຫຼັກຂອງ. hide.bs.dropdownແລະ hidden.bs.dropdownເຫດການມີ clickEventຄຸນສົມບັດ (ພຽງແຕ່ເມື່ອປະເພດເຫດການຕົ້ນສະບັບແມ່ນ click) ທີ່ມີວັດຖຸເຫດການສໍາລັບເຫດການຄລິກ.

ປະເພດເຫດການ	ລາຍລະອຽດ
`hide.bs.dropdown`	ໄຟໄຫມ້ທັນທີເມື່ອ `hide`ວິທີການຕົວຢ່າງໄດ້ຖືກເອີ້ນ.
`hidden.bs.dropdown`	ຍິງເມື່ອການເລື່ອນລົງໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ແລະການຫັນປ່ຽນ CSS ໄດ້ສໍາເລັດ.
`show.bs.dropdown`	ໄຟໄຫມ້ທັນທີເມື່ອ `show`ວິທີການຕົວຢ່າງຖືກເອີ້ນ.
`shown.bs.dropdown`	ຍິງເມື່ອການເລື່ອນລົງໄດ້ຖືກເຮັດໃຫ້ເຫັນໄດ້ໂດຍຜູ້ໃຊ້ແລະການຫັນປ່ຽນ CSS ໄດ້ສໍາເລັດ.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

ເລື່ອນລົງ

ພາບລວມ

ການເຂົ້າເຖິງ

ຕົວຢ່າງ

ປຸ່ມດຽວ

ປຸ່ມແຍກ

ຂະໜາດ

ເລື່ອນລົງຊ້ໍາ

ທິດທາງ

RTL

ກາງ

ເລື່ອນລົງ

ວາງໄວ້ກາງ

ລຸດລົງ

Dropstart

ລາຍການເມນູ

ເຄື່ອນໄຫວ

ຄົນພິການ

ການຈັດຮຽງເມນູ

ການຈັດຕໍາແຫນ່ງທີ່ຕອບສະຫນອງ

ຕົວເລືອກການຈັດຮຽງ

ເນື້ອໃນເມນູ

ສ່ວນຫົວ

ສ່ວນແບ່ງ

ຂໍ້ຄວາມ

ແບບຟອມ

ພຶດຕິກໍາການປິດອັດຕະໂນມັດ

CSS

ຕົວແປ

ຕົວແປ Sass

ມິກຊິນ

ການນໍາໃຊ້

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ຜ່ານ JavaScript

`data-bs-toggle="dropdown"`ຍັງຕ້ອງການ

ທາງເລືອກ

ການນໍາໃຊ້ຟັງຊັນທີ່ມີ`popperConfig`

ວິທີການ

ເຫດການ

ເລື່ອນລົງ

ພາບລວມ

ການເຂົ້າເຖິງ

ຕົວຢ່າງ

ປຸ່ມດຽວ

ປຸ່ມແຍກ

ຂະໜາດ

ເລື່ອນລົງຊ້ໍາ

ທິດທາງ

RTL

ກາງ

ເລື່ອນລົງ

ວາງໄວ້ກາງ

ລຸດລົງ

Dropstart

ລາຍການເມນູ

ເຄື່ອນໄຫວ

ຄົນພິການ

ການຈັດຮຽງເມນູ

ການຈັດຕໍາແຫນ່ງທີ່ຕອບສະຫນອງ

ຕົວເລືອກການຈັດຮຽງ

ເນື້ອໃນເມນູ

ສ່ວນຫົວ

ສ່ວນຫົວແບບເລື່ອນລົງ

ສ່ວນແບ່ງ

ຂໍ້​ຄວາມ

ແບບຟອມ

ຕົວເລືອກແບບເລື່ອນລົງ

ພຶດຕິກໍາການປິດອັດຕະໂນມັດ

CSS

ຕົວແປ

ຕົວແປ Sass

ມິກຊິນ

ການ​ນໍາ​ໃຊ້

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ຜ່ານ JavaScript

data-bs-toggle="dropdown"ຍັງຕ້ອງການ

ທາງເລືອກ

ການນໍາໃຊ້ຟັງຊັນທີ່ມີpopperConfig

ວິທີການ

ເຫດການ

ຂໍ້ຄວາມ

ການນໍາໃຊ້

`data-bs-toggle="dropdown"`ຍັງຕ້ອງການ

ການນໍາໃຊ້ຟັງຊັນທີ່ມີ`popperConfig`