in English
Взаємодії
Класи корисності, які змінюють спосіб взаємодії користувачів із вмістом веб-сайту.
Виділення тексту
Змініть спосіб вибору вмісту під час взаємодії користувача з ним.
Цей абзац буде повністю виділено, коли клацне користувач.
Цей абзац має типову поведінку вибору.
Цей абзац не можна буде вибрати, якщо клацнути користувач.
<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,
),