Gatnaşyklar

Ulanyjylaryň web sahypasynyň mazmuny bilen gatnaşygyny üýtgedýän peýdaly synplar.

Tekst saýlamak

Ulanyjy bilen täsirleşende mazmunyň saýlanyş usulyny üýtgediň.

Ulanyjy basylanda bu abzas bütinleý saýlanar.

Bu abzasda saýlama häsiýet bar.

Ulanyjy basylanda bu abzas saýlanmaz.

html

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

Görkeziji wakalar

“Bootstrap” elementleriň özara täsiriniň öňüni almak ýa-da goşmak üçin sapaklar berýär .pe-none..pe-auto

Bu baglanyşyga basyp bolmaz.

Bu baglanyşyga basyp bolýar (bu adaty hereket).

Bu baglanyşyga basyp bolmaýar, sebäbi pointer-eventsemläk ene-atasyndan miras galypdyr. Şeýle-de bolsa, bu baglanyşygyň synpy bar pe-autowe basyp bolýar.

html

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

Synp .pe-none(we kesgitleýän pointer-eventsCSS häsiýeti) diňe görkeziji (syçan, stilus, degmek) bilen täsirleşmegiň öňüni alýar. Baglanyşyklar we dolandyryşlar .pe-none, adatça, klawiatura ulanyjylary üçin henizem ünsli we hereketli. tabindex="-1"Hatda klawiatura ulanyjylary üçin hem olaryň doly zyýansyzlandyrylmagyny üpjün etmek üçin (klawiaturanyň ünsüni almazlygy üçin) we aria-disabled="true"(kömekçi tehnologiýalara täsirli derejede maýyp bolandyklaryny görkezmek üçin ) goşmaça häsiýetleri goşup bilersiňiz we JavaScript-i ulanyp bilersiňiz hereket etmeginiň öňüni alyň.

Mümkin bolsa, has ýönekeý çözgüt:

Forma dolandyryşlary üçin disabledHTML atributyny goşuň.

hrefSalgylar üçin, interaktiw däl labyr ýa-da ýer eýesi baglanyşygy edip , häsiýeti aýyryň .

Sass

Utilities API

Özara täsir ediş hyzmatlary biziň API API-de yglan edilýär scss/_utilities.scss. Utilities API-ni nähili ulanmalydygyny öwreniň.

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