Interakcije
Klase korisnih programa koje mijenjaju način na koji korisnici stupaju u interakciju sa sadržajem web stranice.
Izbor teksta
Promijenite način odabira sadržaja kada korisnik s njime komunicira.
Ovaj odlomak bit će u potpunosti odabran kada korisnik klikne.
Ovaj odlomak ima zadano ponašanje odabira.
Ovaj odlomak neće biti moguće odabrati kada korisnik klikne.
<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>
Događaji pokazivača
Bootstrap pruža .pe-none
klase .pe-auto
za sprječavanje ili dodavanje interakcija elemenata.
Ovaj link se ne može kliknuti.
Na ovu poveznicu se može kliknuti (ovo je zadano ponašanje).
Ovu vezu nije moguće kliknuti jer je pointer-events
svojstvo naslijeđeno od nadređenog. Međutim, ova veza ima pe-auto
klasu i može se kliknuti.
<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-none
(i
pointer-events
CSS svojstvo koje postavlja) sprječava samo interakcije s pokazivačem (miš, olovka, dodir). Veze i kontrole
.pe-none
prema zadanim postavkama i dalje se mogu fokusirati i djelovati korisnicima tipkovnice. Kako biste osigurali da su potpuno neutralizirani čak i za korisnike tipkovnice, možda ćete morati dodati daljnje atribute kao što su
tabindex="-1"
(kako biste ih spriječili da primaju fokus tipkovnice) i
aria-disabled="true"
(kako biste prenijeli činjenicu da su učinkovito onemogućeni pomoćnim tehnologijama), i eventualno upotrijebite JavaScript za u potpunosti spriječiti njihovo djelovanje. Za kontrole obrasca, razmislite o korištenju
disabled
HTML atributa.
Sass
API za pomoćne programe
Pomoćni programi za interakciju deklarirani su u našem API-ju za pomoćne programe u scss/_utilities.scss
. Naučite kako koristiti API uslužnih programa.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),