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

Классы утилит, которые изменяют способ взаимодействия пользователей с содержимым веб-сайта.

Выделение текста

Изменяйте способ, которым выделяется содержимое, когда пользователь взаимодействует с ним.

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.

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 для предотвращения или добавления взаимодействий элементов.

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.

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 (и CSS-свойство pointer-events, которое он устанавливает) предотвращает только взаимодействия с указателем (мышь, стилус, касание). Ссылки и элементы управления с .pe-none по умолчанию по-прежнему доступны для фокусировки и действий для пользователей клавиатуры. Чтобы убедиться, что они полностью нейтрализованы даже для пользователей клавиатуры, вам может потребоваться добавить дополнительные атрибуты, такие как tabindex="-1" (чтобы предотвратить получение ими фокуса клавиатуры) и aria-disabled="true" (чтобы передать вспомогательным технологиям тот факт, что они фактически отключены), а возможно, использовать JavaScript, чтобы полностью предотвратить их активацию.

По возможности, более простое решение:

Для элементов формы добавьте HTML-атрибут disabled.
Для ссылок удалите атрибут href, сделав их неинтерактивными якорями или ссылками-заполнителями.

CSS

API утилит Sass

Утилиты взаимодействия объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

scss/_utilities.scss

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