Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

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

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

Выбор текста

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

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

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

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

<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">This link</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 class (и CSS свойство pointer-events, которое он устанавливает) устанавливает) предотвращает только взаимодействие с указателем (мышь, стилус, прикосновение). Ссылки и элементы управления с .pe-none по умолчанию по-прежнему доступны пользователям клавиатуры. Чтобы гарантировать, что они полностью нейтрализованы даже для пользователей клавиатуры, вам может потребоваться добавить дополнительные атрибуты, такие как tabindex="-1" (to prevent them from receiving keyboard focus) and aria-disabled="true" (чтобы передать тот факт, что они эффективно отключены для вспомогательных технологий) и, возможно, используют JavaScript, чтобы полностью предотвратить их использование. Для элементов управления формы рассмотрите возможность использования вместо этого HTML атрибута disabled.