Interaksjoner

Verktøyklasser som endrer hvordan brukere samhandler med innholdet på et nettsted.

Tekstvalg

Endre måten innholdet velges på når brukeren samhandler med det.

Dette avsnittet vil bli helt valgt når brukeren klikker på det.

Dette avsnittet har standardvalgatferd.

Denne paragrafen vil ikke være valgbar når den klikkes av brukeren.

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>

Pekerhendelser

Bootstrap gir .pe-noneog .pe-autoklasser for å forhindre eller legge til elementinteraksjoner.

Denne lenken kan ikke klikkes.

Denne lenken kan klikkes (dette er standard oppførsel).

Denne koblingen kan ikke klikkes fordi pointer-eventseiendommen er arvet fra den overordnede. Denne lenken har imidlertid en pe-autoklasse og kan klikkes.

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(og pointer-eventsCSS-egenskapen den angir) forhindrer bare interaksjoner med en peker (mus, pekepenn, berøring). Lenker og kontroller med .pe-noneer som standard fortsatt fokuserbare og handlingsbare for tastaturbrukere. For å sikre at de er fullstendig nøytralisert selv for tastaturbrukere, kan det hende du må legge til flere attributter som tabindex="-1"(for å hindre dem i å motta tastaturfokus) og aria-disabled="true"(for å formidle det faktum at de er effektivt deaktivert til hjelpeteknologier), og muligens bruke JavaScript for å fullstendig hindre dem fra å være handlingsdyktige.

Hvis mulig er den enklere løsningen:

For skjemakontroller legger du til disabledHTML-attributtet.

For koblinger fjerner du hrefattributtet, og gjør det til en ikke-interaktiv anker- eller plassholderlenke.

Sass

Utilities API

Interaksjonsverktøy er deklarert i vår utilities API i scss/_utilities.scss. Lær hvordan du bruker utilities API.

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