Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

Kev sib tham

Cov chav kawm siv hluav taws xob hloov pauv li cas cov neeg siv cuam tshuam nrog cov ntsiab lus ntawm lub vev xaib.

Xaiv cov ntawv

Hloov txoj hauv kev uas cov ntsiab lus raug xaiv thaum tus neeg siv cuam tshuam nrog nws.

Cov kab lus no yuav raug xaiv tag nrho thaum nias los ntawm tus neeg siv.

Cov kab lus no muaj tus cwj pwm xaiv ua ntej.

Cov kab lus no yuav tsis xaiv tau thaum tus neeg siv clicked.

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

Pointer xwm txheej

Bootstrap muab .pe-nonethiab .pe-autocov chav kawm los tiv thaiv lossis ntxiv cov khoom sib cuam tshuam.

Qhov txuas no tsis tuaj yeem nias.

Qhov txuas no tuaj yeem raug nyem (qhov no yog tus cwj pwm qub).

Qhov txuas no tsis tuaj yeem nyem vim tias cov pointer-eventscuab yeej tau txais los ntawm nws niam nws txiv. Txawm li cas los xij, qhov txuas no muaj pe-autochav kawm thiab tuaj yeem nyem.

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

Cov .pe-nonechav kawm (thiab cov pointer-eventscuab yeej CSS nws teev) tsuas yog tiv thaiv kev cuam tshuam nrog tus taw tes (nas, stylus, kov). Kev sib txuas thiab kev tswj hwm nrog .pe-noneyog, los ntawm lub neej ntawd, tseem tsom tau thiab ua tau zoo rau cov neeg siv keyboard. Txhawm rau kom ntseeg tau tias lawv tsis muaj kev cuam tshuam tag nrho txawm rau cov neeg siv cov keyboard, koj yuav tsum tau ntxiv cov yam ntxwv ntxiv xws li tabindex="-1"(kom tiv thaiv lawv los ntawm kev txais cov keyboard tsom) thiab aria-disabled="true"(kom qhia qhov tseeb tias lawv tau ua haujlwm tsis zoo rau kev pabcuam thev naus laus zis), thiab tejzaum nws siv JavaScript rau. tag tiv thaiv lawv los ntawm kev ua.

Yog tias ua tau, qhov kev daws teeb meem yooj yim dua yog:

  • Rau daim ntawv tswj, ntxiv disabledHTML attribute.
  • Rau kev sib txuas, tshem tawm tus hrefcwj pwm, ua rau nws tsis muaj kev sib tham sib txuas lossis qhov chaw txuas.

Sass

Utilities API

Kev sib cuam tshuam cov nqi hluav taws xob tau tshaj tawm hauv peb cov khoom siv hluav taws xob API hauv scss/_utilities.scss. Kawm paub siv cov khoom siv hluav taws xob API li cas.

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