Узаемадзеянне
Карысныя класы, якія змяняюць тое, як карыстальнікі ўзаемадзейнічаюць са змесцівам вэб-сайта.
Вылучэнне тэксту
Змяніць спосаб выбару кантэнту, калі карыстальнік з ім узаемадзейнічае.
Гэты абзац будзе цалкам вылучаны пры пстрычцы карыстальнікам.
Гэты абзац мае паводзіны выбару па змаўчанні.
Гэты абзац нельга будзе выбраць пры націску карыстальнікам.
<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,
),