Tương tác

Các lớp tiện ích thay đổi cách người dùng tương tác với nội dung của trang web.

Lựa chọn văn bản

Thay đổi cách chọn nội dung khi người dùng tương tác với nội dung đó.

Đoạn này sẽ được chọn hoàn toàn khi người dùng nhấp vào.

Đoạn này có hành vi chọn mặc định.

Đoạn này sẽ không thể chọn được khi người dùng nhấp vào.

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

Sự kiện con trỏ

Bootstrap cung cấp .pe-nonevà .pe-autocác lớp để ngăn chặn hoặc thêm các tương tác phần tử.

Không thể nhấp vào liên kết này .

Liên kết này có thể được nhấp vào (đây là hành vi mặc định).

Không thể nhấp vào liên kết nàypointer-events vì thuộc tính được kế thừa từ thuộc tính gốc của nó. Tuy nhiên, liên kết này có một pe-autolớp và có thể được nhấp vào.

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

Lớp .pe-none(và thuộc tính pointer-eventsCSS mà nó đặt) chỉ ngăn các tương tác với con trỏ (chuột, bút cảm ứng, chạm). Các liên kết và điều khiển với .pe-none, theo mặc định, vẫn có thể lấy tiêu điểm và có thể thực hiện được đối với người dùng bàn phím. Để đảm bảo rằng chúng được vô hiệu hóa hoàn toàn ngay cả đối với người dùng bàn phím, bạn có thể cần thêm các thuộc tính khác như tabindex="-1"(để ngăn họ nhận tiêu điểm bàn phím) và aria-disabled="true"(để truyền đạt thực tế là chúng đã bị vô hiệu hóa hiệu quả đối với các công nghệ hỗ trợ) và có thể sử dụng JavaScript để hoàn toàn ngăn cản họ có thể hành động.

Nếu có thể, giải pháp đơn giản hơn là:

Đối với các điều khiển biểu mẫu, hãy thêm disabledthuộc tính HTML.

Đối với các liên kết, hãy xóa hrefthuộc tính, biến nó thành một liên kết cố định hoặc trình giữ chỗ không tương tác.

Sass

API tiện ích

Các tiện ích tương tác được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.

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