Пређи на главни садржај Прескочи на навигацију докумената
Check
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>

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

Боотстрап обезбеђује .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-nonepointer-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,
    ),