ເລື່ອນລົງ

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

ພາບລວມ

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

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

ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການutil.js .

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

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

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

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

ຕົວຢ່າງ

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

ປຸ່ມດຽວ

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

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

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

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

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

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

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

ຂະໜາດ

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

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

ທິດທາງ

ເລື່ອນລົງ

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

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ຫຼົ່ນລົງ

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

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

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropleft

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

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

ເນື້ອໃນເມນູແບບເລື່ອນລົງປະຫວັດສາດ ຕ້ອງ ເປັນການເຊື່ອມຕໍ່, ແຕ່ນັ້ນບໍ່ແມ່ນກໍລະນີກັບ v4 ອີກຕໍ່ໄປ. ໃນປັດຈຸບັນທ່ານສາມາດເລືອກໃຊ້ <button>ອົງປະກອບໃນ dropdowns ຂອງທ່ານແທນທີ່ຈະເປັນພຽງແຕ່ <a>s.

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

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

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

ເຄື່ອນໄຫວ

ເພີ່ມ .activeໃສ່ລາຍການໃນລາຍການແບບເລື່ອນລົງເພື່ອຈັດ ຮູບແບບພວກມັນເປັນການເຄື່ອນໄຫວ .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ຄົນພິການ

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

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

ໂດຍຄ່າເລີ່ມຕົ້ນ, ເມນູເລື່ອນລົງຈະຖືກຈັດວາງໂດຍອັດຕະໂນມັດ 100% ຈາກດ້ານເທິງ ແລະທາງຊ້າຍຂອງພໍ່ແມ່ຂອງມັນ. ຕື່ມການໃສ່ .dropdown-menu-rightໄປ .dropdown-menuທາງຂວາຈັດວາງເມນູແບບເລື່ອນລົງ.

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

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

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

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

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

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

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

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

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

ສ່ວນຫົວ

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

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

ສ່ວນແບ່ງ

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

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

ຂໍ້ຄວາມ

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

<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="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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-offsetຫຼື data-referenceປ່ຽນສະຖານທີ່ຂອງ dropdown ໄດ້.

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

ການນໍາໃຊ້

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

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

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

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

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

ຜ່ານ JavaScript

ໂທຫາ dropdowns ຜ່ານ JavaScript:

$('.dropdown-toggle').dropdown()

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

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

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-offset="".

ຊື່	ປະເພດ	ຄ່າເລີ່ມຕົ້ນ	ລາຍລະອຽດ
ຊົດເຊີຍ	ເລກ \| ຊ່ອຍແນ່ \| ຫນ້າທີ່	0	ຊົດເຊີຍຂອງການຫຼຸດລົງທຽບກັບເປົ້າຫມາຍຂອງມັນ. ເມື່ອຟັງຊັນໃດນຶ່ງຖືກໃຊ້ເພື່ອກໍານົດຄ່າຊົດເຊີຍ, ມັນຖືກເອີ້ນດ້ວຍວັດຖຸທີ່ມີຂໍ້ມູນຊົດເຊີຍເປັນອາກິວເມັນທຳອິດຂອງມັນ. ຟັງຊັນຕ້ອງສົ່ງຄືນວັດຖຸທີ່ມີໂຄງສ້າງດຽວກັນ. ອົງປະກອບກະຕຸ້ນ DOM node ຖືກສົ່ງຜ່ານເປັນອາກິວເມັນທີສອງ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງ ເອກະສານຊົດເຊີຍ ຂອງ Popper.js .
ພິກ	ບູລີນ	ຄວາມຈິງ	ອະນຸຍາດໃຫ້ເລື່ອນລົງເພື່ອພິກໃນກໍລະນີມີການທັບຊ້ອນກັນຢູ່ໃນອົງປະກອບອ້າງອີງ. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງທີ່ Popper.js's flip docs .
ເຂດແດນ	ຊ່ອຍແນ່ \| ອົງປະກອບ	'scrollParent'	Overflow ຂອບເຂດຈໍາກັດຂອງເມນູເລື່ອນລົງ. ຍອມຮັບຄ່າຂອງ `'viewport'`, `'window'`, `'scrollParent'`, ຫຼືການອ້າງອີງ HTMLElement (JavaScript ເທົ່ານັ້ນ). ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມເບິ່ງທີ່ Docs PreventOverflow ຂອງ Popper.js .
ອ້າງອິງ	ຊ່ອຍແນ່ \| ອົງປະກອບ	'ສະຫຼັບ'	ອົງປະກອບອ້າງອີງຂອງເມນູເລື່ອນລົງ. ຍອມຮັບຄ່າຂອງ `'toggle'`, `'parent'`, ຫຼືການອ້າງອີງ HTMLElement. ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມໃຫ້ ອ້າງອີງເຖິງເອກະສານອ້າງອີງ ຂອງ Popper.js .
ຈໍສະແດງຜົນ	ສາຍ	'ເຄື່ອນໄຫວ'	ໂດຍຄ່າເລີ່ມຕົ້ນ, ພວກເຮົາໃຊ້ Popper.js ສໍາລັບການຈັດຕໍາແຫນ່ງແບບເຄື່ອນໄຫວ. ປິດການໃຊ້ງານນີ້ດ້ວຍ `static`.
popperConfig	null \| ວັດຖຸ	null	ເພື່ອປ່ຽນການຕັ້ງຄ່າ Popper.js ເລີ່ມຕົ້ນຂອງ Bootstrap, ເບິ່ງ ການຕັ້ງຄ່າຂອງ Popper.js

ໝາຍເຫດເມື່ອ boundaryຖືກຕັ້ງເປັນຄ່າອື່ນນອກເໜືອໄປຈາກ 'scrollParent', ຮູບແບບ position: staticຈະຖືກນຳໃຊ້ກັບ .dropdownບັນຈຸ.

ວິທີການ

ວິທີການ	ລາຍລະອຽດ
`$().dropdown('toggle')`	ສະຫຼັບເມນູແບບເລື່ອນລົງຂອງແຖບນຳທາງທີ່ລະບຸ ຫຼືການນຳທາງແຖບ.
`$().dropdown('show')`	ສະແດງໃຫ້ເຫັນເມນູເລື່ອນລົງຂອງ navbar ທີ່ໃຫ້ຫຼືການນໍາທາງແຖບ.
`$().dropdown('hide')`	ເຊື່ອງເມນູແບບເລື່ອນລົງຂອງແຖບນຳທາງທີ່ໃຫ້ໄວ້ ຫຼືການນຳທາງແຖບ.
`$().dropdown('update')`	ອັບເດດຕຳແໜ່ງການເລື່ອນລົງຂອງອົງປະກອບໃດໜຶ່ງ.
`$().dropdown('dispose')`	ທໍາລາຍການເລື່ອນລົງຂອງອົງປະກອບ.

ເຫດການ

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

ເລື່ອນລົງ

ພາບລວມ

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

ຕົວຢ່າງ

ປຸ່ມດຽວ

ປຸ່ມແຍກ

ຂະໜາດ

ທິດທາງ

ເລື່ອນລົງ

ຫຼົ່ນລົງ

Dropleft

ລາຍການເມນູ

ເຄື່ອນໄຫວ

ຄົນພິການ

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

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

ເນື້ອໃນເມນູ

ສ່ວນຫົວ

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

ສ່ວນແບ່ງ

ຂໍ້​ຄວາມ

ແບບຟອມ

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

ການ​ນໍາ​ໃຊ້

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

ຜ່ານ JavaScript

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

ທາງເລືອກ

ວິທີການ

ເຫດການ

ຂໍ້ຄວາມ

ການນໍາໃຊ້

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