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

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

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

<p class="user-select-all">Этот абзац будет полностью выделен при нажатии пользователем.</p>
<p class="user-select-auto">Этот абзац имеет поведение выбора по умолчанию.</p>
<p class="user-select-none">Этот абзац не будет доступен для выбора при нажатии пользователем.</p>

Указатель событий

Bootstrap предоставляет классы .pe-none и .pe-auto для предотвращения или добавления взаимодействий элементов.

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">Эта ссылка</a> не может быть нажата.</p>
<p><a href="#" class="pe-auto">Эта ссылка</a> может быть нажата (это поведение по умолчанию).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">Эта ссылка</a> не может быть нажата, потому что свойство <code>pointer-events</code> унаследовано от своего родителя. Однако у <a href="#" class="pe-auto">этой ссылки</a> есть класс <code>pe-auto</code>, и по ней можно перейти.</p>

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

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

• Для элементов управления формой добавьте HTML-атрибут disabled.

• Для ссылок удалите атрибут href, сделав его неинтерактивной привязкой или ссылкой-заполнителем.

Sass

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