Интеракции
Корисни класи кои го менуваат начинот на кој корисниците комуницираат со содржината на веб-локацијата.
Избор на текст
Променете го начинот на кој се избира содржината кога корисникот е во интеракција со неа.
Овој став ќе биде целосно избран кога корисникот ќе го кликне.
Овој параграф има стандардно однесување за избор.
Овој став нема да може да се избере кога корисникот ќе го кликне.
<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.
Сас
Utilities API
Комуналните услуги за интеракција се декларирани во нашите API за комунални услуги во scss/_utilities.scss
. Научете како да ги користите Utilities API.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),