Cмотреть на GitHub

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

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

На этой странице

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

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

Этот абзац будет полностью выделен при нажатии пользователем.

Этот абзац имеет поведение выбора по умолчанию.

Этот абзац не будет доступен для выбора при нажатии пользователем.

html

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

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

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

Эта ссылка не может быть нажата.

Эта ссылка может быть нажата (это поведение по умолчанию).

Эта ссылка не может быть нажата, потому что свойство pointer-events унаследовано от своего родителя. Однако у этой ссылки есть класс pe-auto, и по ней можно перейти.

html

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