Interaksi

Kelas utiliti yang mengubah cara pengguna berinteraksi dengan kandungan tapak web.

Pemilihan teks

Tukar cara kandungan dipilih apabila pengguna berinteraksi dengannya.

Perenggan ini akan dipilih sepenuhnya apabila diklik oleh pengguna.

Perenggan ini mempunyai tingkah laku pilih lalai.

Perenggan ini tidak boleh dipilih apabila diklik oleh pengguna.

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

Acara penunjuk

Bootstrap menyediakan .pe-nonedan .pe-autokelas untuk menghalang atau menambah interaksi elemen.

Pautan ini tidak boleh diklik.

Pautan ini boleh diklik (ini adalah tingkah laku lalai).

Pautan ini tidak boleh diklik kerana pointer-eventsharta itu diwarisi daripada induknya. Walau bagaimanapun, pautan ini mempunyai pe-autokelas dan boleh diklik.

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

Kelas .pe-none(dan sifat pointer-eventsCSS yang ditetapkannya) hanya menghalang interaksi dengan penuding (tetikus, stylus, sentuhan). Pautan dan kawalan dengan .pe-none, secara lalai, masih boleh difokuskan dan boleh diambil tindakan untuk pengguna papan kekunci. Untuk memastikan ia dinetralkan sepenuhnya walaupun untuk pengguna papan kekunci, anda mungkin perlu menambah atribut lanjut seperti tabindex="-1"(untuk menghalangnya daripada menerima fokus papan kekunci) dan aria-disabled="true"(untuk menyampaikan fakta ia dilumpuhkan dengan berkesan kepada teknologi bantuan), dan mungkin menggunakan JavaScript untuk benar-benar menghalang mereka daripada bertindak.

Jika boleh, penyelesaian yang lebih mudah ialah:

Untuk kawalan borang, tambahkan disabledatribut HTML.

Untuk pautan, alih keluar hrefatribut, menjadikannya sauh atau pautan pemegang tempat tidak interaktif.

Sass

API Utiliti

Utiliti interaksi diisytiharkan dalam API utiliti kami dalam scss/_utilities.scss. Ketahui cara menggunakan API utiliti.

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