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