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