Интеракције

Услужне класе које мењају начин на који корисници комуницирају са садржајем веб локације.

Избор текста

Промените начин на који се садржај бира када корисник ступи у интеракцију са њим.

Овај пасус ће бити у потпуности изабран када корисник кликне на њега.

Овај параграф има подразумевано понашање избора.

Овај пасус неће бити могуће изабрати када корисник кликне на њега.

хтмл

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

Догађаји показивача

Боотстрап обезбеђује .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ЦСС својство које поставља) спречава само интеракције са показивачем (миш, оловка, додир). Везе и контроле са .pe-none, подразумевано, и даље могу да се фокусирају и могу да раде за кориснике тастатуре. Да бисте били сигурни да су потпуно неутрализовани чак и за кориснике тастатуре, можда ћете морати да додате додатне атрибуте као што су tabindex="-1"(да бисте спречили да добију фокус тастатуре) и aria-disabled="true"(да бисте пренели чињеницу да су ефективно онемогућени помоћним технологијама), и можда користите ЈаваСцрипт за потпуно их спречи да буду делотворни.

Ако је могуће, једноставније решење је:

За контроле обрасца додајте disabledХТМЛ атрибут.

За везе, уклоните hrefатрибут, чинећи га неинтерактивним сидром или везом за чување места.

Сасс

Утилитиес АПИ

Услужни програми за интеракцију су декларисани у нашем АПИ-ју услужних програма у scss/_utilities.scss. Научите како да користите АПИ за услужне програме.

    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),