ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ເລື່ອນລົງ

ສະຫຼັບການວາງຊ້ອນຕາມບໍລິບົດເພື່ອສະແດງລາຍການລິ້ງ ແລະອື່ນໆອີກດ້ວຍ 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>ອົງປະກອບທັງສອງຢ່າງ:

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

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

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

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

<!-- 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. ບໍ່ຈຳເປັນຕ້ອງມີການປ່ຽນແປງຕໍ່ກັບລາຍການແບບເລື່ອນລົງ.

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

ແລະວາງມັນເພື່ອໃຊ້ໃນແຖບ 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>

ທິດທາງ

RTL

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

ເລື່ອນລົງ

ກະຕຸ້ນເມນູແບບເລື່ອນລົງຂ້າງເທິງອົງປະກອບໂດຍການເພີ່ມ .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>

ຫຼົ່ນລົງ

ກະຕຸ້ນເມນູແບບເລື່ອນລົງຢູ່ເບື້ອງຂວາຂອງອົງປະກອບໂດຍການເພີ່ມ .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">
    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>

Dropleft

ກະຕຸ້ນເມນູແບບເລື່ອນລົງທາງຊ້າຍຂອງອົງປະກອບໂດຍການເພີ່ມ .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">
  <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>

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

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

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

<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ສຳລັບລາຍການປັດຈຸບັນໃນຊຸດໃດໜຶ່ງ.

<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ໃສ່ລາຍການໃນເມນູເລື່ອນລົງເພື່ອຈັດ ຮູບແບບພວກມັນເປັນປິດໃຊ້ງານ .

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

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

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

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

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

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

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

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

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

ສ່ວນຫົວ

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

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

ສ່ວນແບ່ງ

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

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

ແບບຟອມ

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

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

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

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

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

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

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

ຊາສ

ຕົວແປ

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

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

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

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

ຜ່ານ JavaScript

ໂທຫາ dropdowns ຜ່ານ JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"ຍັງຕ້ອງການ

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

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-bs-, ໃນ data-bs-offset="". ໃຫ້ແນ່ໃຈວ່າປ່ຽນປະເພດກໍລະນີຂອງຊື່ທາງເລືອກຈາກ camelCase ເປັນ kebab-case ເມື່ອຖ່າຍທອດທາງເລືອກໂດຍຜ່ານຄຸນລັກສະນະຂໍ້ມູນ. ຕົວຢ່າງ, ແທນທີ່ຈະໃຊ້ data-bs-autoClose="false", ໃຊ້ data-bs-auto-close="false".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
boundary ຊ່ອຍແນ່ | ອົງປະກອບ 'clippingParents' ຂອບເຂດຈໍາກັດ overflow ຂອງເມນູແບບເລື່ອນລົງ (ໃຊ້ກັບຕົວແກ້ໄຂການປ້ອງກັນການ overflow ຂອງ Popper ເທົ່ານັ້ນ). ໂດຍຄ່າເລີ່ມຕົ້ນມັນເປັນ 'clippingParents'ແລະສາມາດຍອມຮັບການອ້າງອີງ HTMLElement (ຜ່ານ JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານ detectOverflow ຂອງ Popper .
reference ຊ່ອຍແນ່ | ອົງປະກອບ | ວັດຖຸ 'toggle' ອົງປະກອບອ້າງອີງຂອງເມນູເລື່ອນລົງ. ຍອມຮັບຄ່າຂອງ 'toggle', 'parent', ການອ້າງອີງ HTMLElement ຫຼືວັດຖຸທີ່ໃຫ້ getBoundingClientRect. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມໃຫ້ເບິ່ງທີ່ Docs constructor ຂອງ Popper ແລະ ເອກະສານ ອົງປະກອບ virtual .
display ສາຍ 'dynamic' ໂດຍຄ່າເລີ່ມຕົ້ນ, ພວກເຮົາໃຊ້ Popper ສໍາລັບການຈັດຕໍາແຫນ່ງແບບເຄື່ອນໄຫວ. ປິດການໃຊ້ງານນີ້ດ້ວຍ static.
offset array | ຊ່ອຍແນ່ | ຫນ້າທີ່ [0, 2]

ຊົດເຊີຍຂອງການຫຼຸດລົງທຽບກັບເປົ້າຫມາຍຂອງມັນ. ທ່ານສາມາດຖ່າຍທອດສະຕຣິງໃນຄຸນລັກສະນະຂໍ້ມູນດ້ວຍຄ່າທີ່ແຍກດ້ວຍເຄື່ອງໝາຍຈຸດເຊັ່ນ:data-bs-offset="10,20"

ເມື່ອຟັງຊັນຖືກນໍາໃຊ້ເພື່ອກໍານົດການຊົດເຊີຍ, ມັນຖືກເອີ້ນວ່າວັດຖຸທີ່ມີການຈັດວາງ popper, ການອ້າງອີງ, ແລະ popper rects ເປັນການໂຕ້ຖຽງທໍາອິດຂອງມັນ. ອົງປະກອບກະຕຸ້ນ DOM node ແມ່ນຜ່ານເປັນອາກິວເມັນທີສອງ. ຟັງຊັນຕ້ອງສົ່ງຄືນ array ທີ່ມີສອງຕົວເລກ: .[skidding, distance]

ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper .

autoClose ບູລີນ | ສາຍ true

ຕັ້ງຄ່າພຶດຕິກໍາການປິດອັດຕະໂນມັດຂອງ dropdown:

  • true- ເລື່ອນລົງຈະຖືກປິດໂດຍການຄລິກໃສ່ພາຍນອກຫຼືພາຍໃນເມນູເລື່ອນລົງ.
  • false- ເລື່ອນລົງຈະຖືກປິດໂດຍການຄລິກໃສ່ປຸ່ມສະຫຼັບແລະການໂທດ້ວຍຕົນເອງ hideຫຼື toggleວິທີການ. (ຍັງຈະບໍ່ຖືກປິດໂດຍການກົດປຸ່ມ esc)
  • 'inside'- ເລື່ອນລົງຈະຖືກປິດ (ພຽງແຕ່) ໂດຍການຄລິກໃສ່ພາຍໃນເມນູເລື່ອນລົງ.
  • 'outside'- ເລື່ອນລົງຈະຖືກປິດ (ພຽງແຕ່) ໂດຍການຄລິກໃສ່ຢູ່ນອກເມນູເລື່ອນລົງ.
popperConfig null | ວັດຖຸ | ຫນ້າທີ່ null

ເພື່ອປ່ຽນການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap, ເບິ່ງ ການຕັ້ງຄ່າຂອງ Popper .

ເມື່ອຟັງຊັນຖືກໃຊ້ເພື່ອສ້າງການຕັ້ງຄ່າ Popper, ມັນຖືກເອີ້ນດ້ວຍວັດຖຸທີ່ມີການຕັ້ງຄ່າ Popper ເລີ່ມຕົ້ນຂອງ Bootstrap. ມັນຊ່ວຍໃຫ້ທ່ານໃຊ້ແລະລວມຄ່າເລີ່ມຕົ້ນກັບການຕັ້ງຄ່າຂອງທ່ານເອງ. ຟັງຊັນຕ້ອງສົ່ງຄືນວັດຖຸການຕັ້ງຄ່າສໍາລັບ Popper.

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

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

ວິທີການ

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

ເຫດການ

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

ວິທີການ ລາຍລະອຽດ
show.bs.dropdown ໄຟໄຫມ້ທັນທີເມື່ອວິທີການສະແດງຕົວຢ່າງຖືກເອີ້ນ.
shown.bs.dropdown ຍິງເມື່ອການເລື່ອນລົງໄດ້ຖືກເຮັດໃຫ້ເຫັນໄດ້ໂດຍຜູ້ໃຊ້ແລະການຫັນປ່ຽນ CSS ໄດ້ສໍາເລັດ.
hide.bs.dropdown ໄຟໄຫມ້ທັນທີເມື່ອວິທີການເຊື່ອງຕົວຢ່າງຖືກເອີ້ນ.
hidden.bs.dropdown ຍິງເມື່ອການເລື່ອນລົງໄດ້ສໍາເລັດການຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ແລະການຫັນປ່ຽນ CSS ໄດ້ສໍາເລັດ.
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})