Взаимодействия
Классы утилит, которые изменяют способ взаимодействия пользователей с содержимым веб-сайта.
Выделение текста
Измените способ выбора содержимого при взаимодействии с ним пользователя.
Этот абзац будет полностью выделен при нажатии пользователем.
Этот абзац имеет поведение выбора по умолчанию.
Этот абзац не будет доступен для выбора при нажатии пользователем.
<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, и по ней можно перейти.
<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.
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,
),