Узаемадзеянне

Карысныя класы, якія змяняюць тое, як карыстальнікі ўзаемадзейнічаюць са змесцівам вэб-сайта.

Вылучэнне тэксту

Змяніць спосаб выбару кантэнту, калі карыстальнік з ім узаемадзейнічае.

Гэты абзац будзе цалкам вылучаны пры пстрычцы карыстальнікам.

Гэты абзац мае паводзіны выбару па змаўчанні.

Гэты абзац нельга будзе выбраць пры націску карыстальнікам.

html

<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клас і па ёй можна націснуць.

html

<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.

Для спасылак выдаліце hrefатрыбут, зрабіўшы яго неінтэрактыўным якарам або спасылкай-запаўняльнікам.

Сас

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,
    ),