Interaktionen
Hilfsklassen, die ändern, wie Benutzer mit Inhalten einer Website interagieren.
Textauswahl
Ändern Sie die Art und Weise, wie der Inhalt ausgewählt wird, wenn der Benutzer damit interagiert.
Dieser Absatz wird vollständig ausgewählt, wenn er vom Benutzer angeklickt wird.
Dieser Absatz hat das standardmäßige Auswahlverhalten.
Dieser Absatz ist nicht auswählbar, wenn er vom Benutzer angeklickt wird.
<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>Zeigerereignisse
Bootstrap bietet .pe-noneund .pe-autoKlassen, um Elementinteraktionen zu verhindern oder hinzuzufügen.
Dieser Link kann nicht angeklickt werden.
Auf diesen Link kann geklickt werden (dies ist das Standardverhalten).
Dieser Link kann nicht angeklickt werden, da die pointer-eventsEigenschaft von ihrem übergeordneten Element geerbt wird. Dieser Link hat jedoch eine pe-autoKlasse und kann angeklickt werden.
<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-noneKlasse (und die von
pointer-eventsihr festgelegte CSS-Eigenschaft) verhindert nur Interaktionen mit einem Zeiger (Maus, Stift, Berührung). Links und Steuerelemente mit
.pe-nonesind standardmäßig immer noch fokussierbar und für Tastaturbenutzer umsetzbar. tabindex="-1"Um sicherzustellen, dass sie
auch für Tastaturbenutzer vollständig neutralisiert werden, müssen Sie möglicherweise weitere Attribute hinzufügen, wie
aria-disabled="true"z vollständig verhindern, dass sie handlungsfähig sind. Erwägen Sie für Formularsteuerelemente
disabledstattdessen die Verwendung des HTML-Attributs.
Sass
Dienstprogramme-API
Interaktionsdienstprogramme werden in unserer Hilfsprogramm-API in deklariert scss/_utilities.scss. Erfahren Sie, wie Sie die Utilities-API verwenden.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),