Interactions

Utility classes that change how users interact with contents of a website.

Text selection

Change the way in which the content is selected when the user interacts with it.

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

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

Pointer events

Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions.

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

<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 ដែលវាកំណត់) ការពារតែអន្តរកម្មជាមួយទ្រនិច (កណ្តុរ ស្ទីល ប៉ះ) ប៉ុណ្ណោះ។ តំណ និងការគ្រប់គ្រងជាមួយ .pe-noneគឺតាមលំនាំដើម នៅតែអាចផ្តោតអារម្មណ៍ និងអាចធ្វើសកម្មភាពបានសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច។ ដើម្បីធានាថាពួកវាត្រូវបានអព្យាក្រឹតទាំងស្រុង សូម្បីតែអ្នកប្រើប្រាស់ក្តារចុច អ្នកប្រហែលជាត្រូវបន្ថែមគុណលក្ខណៈបន្ថែមទៀតដូចជា tabindex="-1"(ដើម្បីការពារពួកគេពីការទទួលការផ្តោតអារម្មណ៍លើក្តារចុច) និង aria-disabled="true"(ដើម្បីបង្ហាញពីការពិតថាពួកគេត្រូវបានបិទយ៉ាងមានប្រសិទ្ធភាពចំពោះបច្ចេកវិទ្យាជំនួយ) ហើយអាចប្រើ JavaScript ដើម្បី រារាំងពួកគេទាំងស្រុងពីសកម្មភាព។ សម្រាប់ការគ្រប់គ្រងទម្រង់ សូមពិចារណាប្រើ disabledគុណលក្ខណៈ HTML ជំនួសវិញ។

សាស

Utilities API

Interaction utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

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