ມູນນິທິພົດລະບາຍ Bootstrap 5
- ຫນ້າຫນັງຫນຶ່ງ BS5 ການສະແດງບັນທຶກ
- ຫນ້າຫນັງ BS5 ການປິດລົງ
ມູນນິທິພົດລະບາຍພື້ນຖານ
ມູນນິທິພົດລະບາຍສາມາດປ່ຽນແປງໄດ້ຫຼາຍລາຍການທີ່ກ່ຽວກັບຜູ້ໃຊ້
ຄວາມຄິດທີ່ຕິດຕາມ
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
ຄະຕິນລະບາຍຕົກລົງ
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">ການເຊື່ອມຕໍ່ 1</a></li>
<li><a class="dropdown-item" href="#">ການເຊື່ອມຕໍ່ 2</a></li>
<li><a class="dropdown-item" href="#">ການເຊື່ອມຕໍ່ 3</a></li>
</ul>
</div>
ຄວາມຄິດທີ່ອະທິບາຍ
.dropdown ພາສາທີ່ສະແຫວງວ່າກົດລະບຽບພົດລະບາຍ
ສະແຫວງວ່າເພື່ອເປີດມູນນິທິພົດລະບາຍ .dropdown-toggle class and data-toggle="dropdown" button or link.
attribute of .dropdown-menu class to <div> element, can actually build dropdown menu. Then add .dropdown-item class ຕິດຕໍ່ໄປໃຫ້ element each (link or button) in dropdown menu.
line separator of dropdown list
.dropdown-divider class ຕິດຕໍ່ໃຫ້ເພີ່ມ horizontal thin border ລະຫວ່າງ ການເຊື່ອມຕໍ່ຂອງ dropdown menu:
ຄວາມຄິດທີ່ຕິດຕາມ
<li><hr class="dropdown-divider"></hr></li>
ຫົວຂໍ້ dropdown list
.dropdown-header class ຕິດຕໍ່ໃຫ້ເພີ່ມ ຫົວຂໍ້ໃນ dropdown menu:
ຄວາມຄິດທີ່ຕິດຕາມ
<li><h5 class="dropdown-header">Dropdown header 1</h5></li>
ຢ່າງຫຼີກລົງ ແລະ ສະຖານະ
ນຳໃຊ້ .active ສະຖານະ .active ເພື່ອສະແດງ ຕົວແຜງພົ່ນລົງມາທີ່ມີ background color ສີຟ້າ.
ຖ້າເຈົ້າຕ້ອງການຫຼີກລົງຕົວແຜງພົ່ນລົງມາບາງຢ່າງໃນ dropdown list, ນຳໃຊ້ class: .disabled ສະຖານະ (ໃນລະຫວ່າງ hover ຈະມີສີຂີ້ງສັນຍາວາງແລະ "no-parking-sign" icon).
ຄວາມຄິດທີ່ຕິດຕາມ
<li><a class="dropdown-item" href="#">ທຳມະດາ</a></li> <li><a class="dropdown-item active" href="#">ສະຖານະ</a></li> <li><a class="dropdown-item disabled" href="#">ຫຼີກລົງ</a></li>
ຕັ້ງການສະຖານະຂອງຕົວແຜງພົ່ນລົງມາ
ເຈົ້າສາມາດເພີ່ມໄດ້ໂດຍການ: .dropend ຫຼື .dropstart ສະຖານະ .dropstart ຕິດຕໍ່ໄປໃຫ້ element dropdown ເພື່ອສ້າງ menu "dropend" ຫຼື "dropstart". ສັງເກດວ່າ: ອຸຍການ/ອອກສຽງ ຈະຖືກເພີ່ມໃຫ້ໂດຍອັດຕາການ:
Dropright
<div class="dropdown dropend">
Dropleft
<div class="dropdown dropstart">
ລົ້ນລົງມາທີ່ຖືກກັດແຄງທີ່ມີສີສັນຍາວາງ
ຖ້າເຈົ້າຕ້ອງການວ່າມີຕົວແຜງພົ່ນລົງມາທີ່ຖືກກັດແຄງທີ່ມີສີສັນຍາວາງ: .dropdown-menu-end ສະຖານະ .dropdown-menu ຕິດຕໍ່ .dropdown-menu ສິ່ງຂອງ:
ຄວາມຄິດທີ່ຕິດຕາມ
<div class="dropdown-menu dropdown-menu-end">
ລົ້ນລົງມາຈາກຂຶ້ນ
ຖ້າເຈົ້າຕ້ອງການວ່າມີຕົວແຜງພົ່ນລົງມາຈາກຂຶ້ນຫຼາຍກວ່າຈາກລົງລົງໃຫ້ class="dropdown" <div> element ປ່ຽນໄປ "dropup"：
ຄວາມຄິດທີ່ຕິດຕາມ
<div class="dropup">
ຂໍ້ຄວາມລົງລົງ
.dropdown-item-text ພາສານຳໃຊ້ສຳລັບການເພີ່ມຄວາມລັບຂໍ້ຄວາມ, ຫຼືສຳລັບການເພີ່ມຮູບແບບການເຊື່ອມຕໍ່ຄວາມລັບແບບລະບົບ.
ຄວາມຄິດທີ່ຕິດຕາມ
<ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">ການເຊື່ອມຕໍ່ 1</a></li> <li><a class="dropdown-item" href="#">ການເຊື່ອມຕໍ່ 2</a></li> <li><a class="dropdown-item" href="#">ການເຊື່ອມຕໍ່ 3</a></li> <li><a class="dropdown-item-text" href="#">ຂໍ້ມູນເຊື່ອມຕໍ່</a></li> <li><span class="dropdown-item-text">ຂໍ້ຄວາມທີ່ບໍ່ມີການສະແດງ</span></li> </ul>
ການປະສົມກັບການປິດລົງຕັ້ງມັດລົງລົງແລະລາຍການລົງລົງ
ຄວາມຄິດທີ່ຕິດຕາມ
<div class="btn-group">
<button type="button" class="btn btn-primary">ຫຸວນິວ</button>
<button type="button" class="btn btn-primary">ກາກິງ</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ຫຸວນິວ</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">ໂທລະສັບມືຖື</a></li>
<li><a class="dropdown-item" href="#">ໂທລະສັບແບບເທັນໂລພັນ</a></li>
</ul>
</div>
</div>
ການປະສົມກັບການປິດລົງຕັ້ງມັດລົງລົງແລະລາຍການລົງລົງ
ຄວາມຄິດທີ່ຕິດຕາມ
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">ຫຸວນິວ</button>
<button type="button" class="btn btn-primary">ກາກິງ</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ຫຸວນິວ</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">ໂທລະສັບມືຖື</a></li>
<li><a class="dropdown-item" href="#">ໂທລະສັບແບບເທັນໂລພັນ</a></li>
</ul>
</div>
</div>
- ຫນ້າຫນັງຫນຶ່ງ BS5 ການສະແດງບັນທຶກ
- ຫນ້າຫນັງ BS5 ການປິດລົງ
