Interaktioner

Verktygsklasser som ändrar hur användare interagerar med innehållet på en webbplats.

Textval

Ändra sättet på vilket innehållet väljs när användaren interagerar med det.

Detta stycke kommer att väljas helt när användaren klickar på det.

Det här stycket har standardvalbeteende.

Detta stycke kommer inte att vara valbart när användaren klickar på det.

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>

Pekarhändelser

Bootstrap tillhandahåller .pe-noneoch .pe-autoklasser för att förhindra eller lägga till elementinteraktioner.

Denna länk kan inte klickas.

Den här länken kan klickas (detta är standardbeteende).

Det går inte att klicka på den här länkenpointer-events eftersom egenskapen ärvs från sin förälder. Den här länken har dock en pe-autoklass och kan klickas på.

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>

Klassen .pe-none(och pointer-eventsCSS-egenskapen den ställer in) förhindrar endast interaktioner med en pekare (mus, penna, beröring). Länkar och kontroller med .pe-noneär, som standard, fortfarande fokuserbara och handlingsbara för tangentbordsanvändare. För att säkerställa att de är helt neutraliserade även för tangentbordsanvändare, kan du behöva lägga till ytterligare attribut som tabindex="-1"(för att förhindra dem från att ta emot tangentbordsfokus) och aria-disabled="true"(för att förmedla det faktum att de faktiskt är inaktiverade till hjälpmedel), och eventuellt använda JavaScript för att helt hindra dem från att kunna åtgärdas.

Om möjligt är den enklare lösningen:

För formulärkontroller, lägg till disabledHTML-attributet.

För länkar, ta bort hrefattributet, vilket gör det till en icke-interaktiv ankare eller platshållarlänk.

Sass

Utilities API

Interaktionsverktyg deklareras i vårt verktygs-API i scss/_utilities.scss. Lär dig hur du använder utilities API.

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