Mijiedarbība

Lietderības klases, kas maina to, kā lietotāji mijiedarbojas ar vietnes saturu.

Teksta atlase

Mainiet veidu, kādā saturs tiek atlasīts, kad lietotājs ar to mijiedarbojas.

Kad lietotājs noklikšķinās, šī rindkopa tiks pilnībā atlasīta.

Šai rindkopai ir noklusējuma atlases darbība.

Šo rindkopu nevar atlasīt, ja lietotājs noklikšķinās uz tā.

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

Rādītāja notikumi

Bootstrap nodrošina .pe-noneun .pe-autoklases, lai novērstu vai pievienotu elementu mijiedarbību.

Uz šīs saites nevar noklikšķināt.

Uz šīs saites var noklikšķināt (tā ir noklusējuma darbība).

Uz šīs saites nevar noklikšķināt, jo pointer-eventsīpašums ir mantots no tā vecāka. Tomēr šai saitei ir pe-autoklase, un uz tās var noklikšķināt.

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

Klase .pe-none(un pointer-eventstās iestatītais CSS rekvizīts) tikai novērš mijiedarbību ar rādītāju (peli, irbuli, pieskārienu). Saites un vadīklas .pe-nonepēc noklusējuma joprojām ir fokusējamas un izmantojamas tastatūras lietotājiem. Lai nodrošinātu, ka tie ir pilnībā neitralizēti pat tastatūras lietotājiem, iespējams, būs jāpievieno papildu atribūti, piemēram, tabindex="-1"(lai tie nesaņemtu tastatūras fokusu) un aria-disabled="true"(lai norādītu, ka tie ir efektīvi atspējoti palīgtehnoloģijās), un, iespējams, jāizmanto JavaScript, lai pilnībā neļautu tām rīkoties. Veidlapas vadīklām disabledtā vietā apsveriet HTML atribūta izmantošanu.

Sass

Utilities API

Mijiedarbības utilītas ir deklarētas mūsu utilītu API valodā scss/_utilities.scss. Uzziniet, kā izmantot utilītu API.

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