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>.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. Đối với các điều khiển biểu mẫu, hãy xem xét sử dụng
disabledthuộc tính HTML để thay thế.
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,
),