Bootstrap 5 ການຕັ້ງການປະກາດ

ຕັດວິດຍິງ

ຕັດວິດຍິງ (Popover) ຄິມມູນຄ່າຄືກັບ ຕັດວິດຍິງ; ມັນແມ່ນຕັດວິດຍິງທີ່ຈະປະກົດຢູ່ໃນເວລາທີ່ຜູ້ນຳໃຊ້ກຳລັງກົດລະບຽບສິ່ງພິມະພາບ. ຄວາມແຕກຕ່າງມັນຈະແມ່ນຕັດວິດຍິງສາມາດກວມຂຶ້ນເນື້ອຫຼາຍຫຼາຍ.

ການສ້າງຕັດວິດຍິງ

ການສ້າງຕັດວິດຍິງ, ກະລຸນານຳໃຊ້ data-bs-toggle="popover" ການເພີ່ມຂໍ້ຄວາມສຳລັບສິ່ງພິມະພາບ.

ກະລຸນານຳໃຊ້ title ການກຳນົດຂໍ້ຄວາມຫົວຂໍ້ຕັດວິດຍິງ, ແລະໃຊ້ data-bs-content ການກຳນົດຂໍ້ຄວາມທີ່ຈະປະກົດຢູ່ໃນຕັດວິດຍິງ:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="弹出框标题" data-bs-content="弹出框内的一些内容">Toggle popover</button>

注意：ຕັດວິດຍິງຕ້ອງຖືກກະກຽມສຳລັບ JavaScript ເພື່ອການໃຊ້.

ລະຫັດການການກະກຽມຕັດວິດຍິງທັງໝົດຢູ່ໃນເອກະສານນີ້:

实例

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

亲自试一试

ການກຳນົດຕັດວິດຍິງ

ໂດຍປົກກະຕິ ຕັດວິດຍິງຈະປະກົດຢູ່ດ້ານຂວາຂອງສິ່ງພິມະພາບ.

ກະລຸນານຳໃຊ້ data-bs-placement ການກະກຽມຕັດວິດຍິງຢູ່ຫົວຂໍ້ສະຖານະຂອງສິ່ງພິມະພາບພາຍໃນສາຍພາຍດ້ານຂວາ, ດ້ານຫົວ, ດ້ານຊາຍ, ຫຼື ດ້ານຫາຍ:

实例

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">ດ້ານສູງ</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">ດ້ານລຸ່ມ</a>
Left
Right

亲自试一试

注意：如果没有足够的空间，placement 属性将不会按您的预期工作。例如：如果您在页面顶部（无预留空间）使用 top placement 属性，它将改为在元素下方或右侧（任何有空间的地方）显示弹出框。

关闭弹出框

默认情况下，再次单击元素时会关闭弹出窗口。但是，您可以使用 data-bs-trigger="focus" 属性，设置该属性可在元素外部单击时关闭弹出窗口：

实例

点击我

亲自试一试

悬停弹出框

提示：如果您希望在将鼠标指针移动到元素上时显示弹出框，请使用值为 "hover" 的 data-bs-trigger 属性：

实例

请在我上方悬停

亲自试一试