Interacties

Utility-klassen die de manier waarop gebruikers omgaan met de inhoud van een website veranderen.

Tekst selectie

Wijzig de manier waarop de inhoud wordt geselecteerd wanneer de gebruiker ermee communiceert.

Deze paragraaf wordt volledig geselecteerd wanneer de gebruiker erop klikt.

Deze alinea heeft standaard selectiegedrag.

Deze paragraaf kan niet worden geselecteerd wanneer erop wordt geklikt door de gebruiker.

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

Aanwijzergebeurtenissen

Bootstrap biedt .pe-noneen .pe-autoklassen om interacties met elementen te voorkomen of toe te voegen.

Deze link kan niet worden aangeklikt.

Op deze link kan worden geklikt (dit is standaardgedrag).

Op deze link kan niet worden geklikt omdat de pointer-eventseigenschap is overgenomen van de bovenliggende eigenschap. Deze link heeft echter een pe-autoklasse en kan worden aangeklikt.

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

De .pe-noneklasse (en de pointer-eventsCSS-eigenschap die deze instelt) voorkomt alleen interacties met een aanwijzer (muis, stylus, aanraking). Links en bedieningselementen met .pe-nonezijn standaard nog steeds focusbaar en bruikbaar voor toetsenbordgebruikers. Om ervoor te zorgen dat ze zelfs voor toetsenbordgebruikers volledig worden geneutraliseerd, moet u mogelijk extra kenmerken toevoegen, zoals tabindex="-1"(om te voorkomen dat ze toetsenbordfocus krijgen) en aria-disabled="true"(om duidelijk te maken dat ze effectief zijn uitgeschakeld voor ondersteunende technologieën), en mogelijk JavaScript gebruiken om volledig voorkomen dat ze actie kunnen ondernemen.

Indien mogelijk is de eenvoudigere oplossing:

Voeg voor formulierbesturingselementen het disabledHTML-kenmerk toe.

Voor links verwijdert u het hrefattribuut, waardoor het een niet-interactieve anker- of tijdelijke aanduiding-link wordt.

Sass

Hulpprogramma's-API

Interactiehulpprogramma's worden gedeclareerd in onze hulpprogramma's-API in scss/_utilities.scss. Leer hoe u de hulpprogramma's-API gebruikt.

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