Интеракции

Корисни класи кои го менуваат начинот на кој корисниците комуницираат со содржината на веб-локацијата.

Избор на текст

Променете го начинот на кој се избира содржината кога корисникот е во интеракција со неа.

Овој став ќе биде целосно избран кога корисникот ќе го кликне.

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

Овој став нема да може да се избере кога корисникот ќе го кликне.

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атрибутот, правејќи го неинтерактивно сидро или врска со место.

Сас

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