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

ການໂຕ້ຕອບ

ຫ້ອງຮຽນຜົນປະໂຫຍດທີ່ປ່ຽນແປງວິທີທີ່ຜູ້ໃຊ້ພົວພັນກັບເນື້ອຫາຂອງເວັບໄຊທ໌.

ການເລືອກຂໍ້ຄວາມ

ປ່ຽນວິທີທີ່ເນື້ອຫາຖືກເລືອກເມື່ອຜູ້ໃຊ້ພົວພັນກັບມັນ.

ວັກນີ້ຈະຖືກເລືອກທັງໝົດເມື່ອຄລິກໂດຍຜູ້ໃຊ້.

ວັກນີ້ມີພຶດຕິກໍາການເລືອກເລີ່ມຕົ້ນ.

ວັກນີ້ຈະບໍ່ສາມາດເລືອກໄດ້ເມື່ອຜູ້ໃຊ້ຄລິກ.

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

ຕົວຊີ້ເຫດການ

Bootstrap ສະຫນອງ .pe-noneແລະ .pe-autoຫ້ອງຮຽນເພື່ອປ້ອງກັນຫຼືເພີ່ມປະຕິສໍາພັນອົງປະກອບ.

ລິ້ງນີ້ ບໍ່ສາມາດຄລິກໄດ້.

ການເຊື່ອມຕໍ່ນີ້ ສາມາດຖືກຄລິກ (ນີ້ແມ່ນພຶດຕິກໍາມາດຕະຖານ).

ລິ້ງນີ້ ບໍ່ສາມາດຄລິກໄດ້ເນື່ອງຈາກ pointer-eventsຊັບສິນແມ່ນສືບທອດມາຈາກພໍ່ແມ່ຂອງມັນ. ຢ່າງໃດກໍຕາມ, ການເຊື່ອມຕໍ່ ນີ້ມີ pe-autoຫ້ອງຮຽນແລະສາມາດຄລິກໃສ່.

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
ຫ້ອງ .pe-noneຮຽນ (ແລະ pointer-eventsຄຸນສົມບັດ CSS ທີ່ມັນກໍານົດ) ພຽງແຕ່ປ້ອງກັນການໂຕ້ຕອບກັບຕົວຊີ້ (ຫນູ, stylus, ສໍາຜັດ). ການເຊື່ອມຕໍ່ແລະການຄວບຄຸມທີ່ .pe-noneມີ, ໂດຍຄ່າເລີ່ມຕົ້ນ, ຍັງສາມາດສຸມໃສ່ແລະປະຕິບັດໄດ້ສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ. ເພື່ອຮັບປະກັນວ່າພວກມັນຖືກເຮັດໃຫ້ເປັນກາງຢ່າງສົມບູນເຖິງແມ່ນວ່າສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ, ທ່ານອາດຈະຕ້ອງເພີ່ມຄຸນລັກສະນະເພີ່ມເຕີມເຊັ່ນ: tabindex="-1"(ເພື່ອປ້ອງກັນບໍ່ໃຫ້ພວກເຂົາໄດ້ຮັບການເນັ້ນໃສ່ແປ້ນພິມ) ແລະ aria-disabled="true"(ເພື່ອສະແດງຄວາມຈິງທີ່ວ່າພວກເຂົາຖືກປິດການໃຊ້ງານຢ່າງມີປະສິດທິພາບກັບເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ), ແລະອາດຈະໃຊ້ JavaScript ເພື່ອ ປ້ອງກັນບໍ່ໃຫ້ພວກເຂົາປະຕິບັດໄດ້ຢ່າງສົມບູນ. ສໍາລັບການຄວບຄຸມແບບຟອມ, ພິຈາລະນານໍາໃຊ້ disabledຄຸນລັກສະນະ HTML ແທນ.

ຊາສ

Utilities API

ຜົນປະໂຫຍດປະຕິສໍາພັນໄດ້ຖືກປະກາດຢູ່ໃນ API ຜົນປະໂຫຍດຂອງພວກເຮົາໃນ scss/_utilities.scss. ຮຽນຮູ້ວິທີການນໍາໃຊ້ API ຜົນປະໂຫຍດ.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),