Взаимодействия

Полезни класове, които променят начина, по който потребителите взаимодействат със съдържанието на уебсайт.

Избор на текст

Променете начина, по който се избира съдържанието, когато потребителят взаимодейства с него.

Този параграф ще бъде изцяло избран, когато потребителят щракне върху него.

Този параграф има поведение при избиране по подразбиране.

Този абзац няма да може да се избира при щракване от потребителя.

html

<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клас и може да се кликне върху нея.

html

<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-eventsCSS свойството, което задава) предотвратява само взаимодействия с показалец (мишка, стилус, докосване). Връзките и контролите с .pe-noneпо подразбиране все още могат да се фокусират и действат за потребителите на клавиатурата. За да сте сигурни, че те са напълно неутрализирани дори за потребители на клавиатура, може да се наложи да добавите допълнителни атрибути като tabindex="-1"(за да им попречите да получават фокус от клавиатурата) и aria-disabled="true"(за да предадете факта, че те са ефективно деактивирани за помощни технологии), и евентуално да използвате JavaScript за напълно им попречи да бъдат предприети действия.

Ако е възможно, по-простото решение е:

За контроли на формуляри добавете disabledатрибута HTML.

За връзки премахнете hrefатрибута, като го направите неинтерактивна котва или заместител на връзка.

дързък

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