Bootstrap 5.2 / Utilities

Interacties

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

Tekstselectie

Verander de manier waarop content wordt geselecteerd wanneer de gebruiker ermee interacteert.

HTML

<p class="user-select-all">Deze alinea wordt volledig geselecteerd wanneer de gebruiker erop klikt.</p>
<p class="user-select-auto">Deze alinea heeft het standaard selectiegedrag.</p>
<p class="user-select-none">Deze alinea is niet selecteerbaar wanneer de gebruiker erop klikt.</p>

Pointer events

Bootstrap biedt de klassen .pe-none en .pe-auto om interacties met een element te voorkomen of juist toe te voegen.

HTML

<p>Op <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">deze link</a> kan niet worden geklikt.</p>
<p>Op <a href="#" class="pe-auto">deze link</a> kan wel worden geklikt (dit is het standaardgedrag).</p>
<p class="pe-none">Op <a href="#" tabindex="-1" aria-disabled="true">deze link</a> kan niet worden geklikt, omdat de eigenschap <code>pointer-events</code> van het bovenliggende element wordt geërfd. <a href="#" class="pe-auto">Deze link</a> heeft echter een <code>pe-auto</code>-klasse en kan wél worden aangeklikt.</p>

De klasse .pe-none (en de CSS-eigenschap pointer-events die hij instelt) voorkomt alleen interacties met een aanwijzer (muis, stylus, aanraking). Links en bedieningselementen met .pe-none zijn standaard nog steeds focusbaar en bedienbaar voor toetsenbordgebruikers. Om ze ook voor toetsenbordgebruikers volledig uit te schakelen, moet je mogelijk extra attributen toevoegen, zoals tabindex="-1" (om te voorkomen dat ze toetsenbordfocus krijgen) en aria-disabled="true" (om aan hulptechnologieën door te geven dat ze feitelijk zijn uitgeschakeld), en eventueel JavaScript gebruiken om ze volledig onbruikbaar te maken.

Indien mogelijk is de eenvoudigere oplossing:

Voeg bij formulierbesturingselementen het HTML-attribuut disabled toe.

Verwijder bij links het href-attribuut, waardoor het een niet-interactief anker of een placeholder-link wordt.

Sass

Utilities-API

Interactie-utilities worden gedeclareerd in onze utilities-API in scss/_utilities.scss. Leer hoe je de utilities-API gebruikt.

Standaardwaarden: zie scss/_utilities.scss in de Bootstrap-broncode.