React bootstrap loại bỏ phác thảo nút
|
Bootstrap 5 cung cấp một loạt các lớp có thể được sử dụng để tạo các nút phác thảo trong dự án của chúng tôi, tôi. e. nút không có màu nền. Các lớp nút phác thảo loại bỏ mọi màu nền hoặc kiểu hình nền được áp dụng cho các nút. Chúng tôi sẽ sử dụng. btn-outline-* để tạo nút phác thảo, trong đó * được thay thế bằng tên màu Show Các lớp phác thảo nút
cú pháp
ví dụ 1. Trong ví dụ này, chúng ta sẽ sử dụng các lớp phác thảo nút để tạo các nút phác thảo HTML________ 741 ________ 745 ________ 75 Sử dụng các tiện ích đường viền để nhanh chóng định kiểu đường viền và bán kính đường viền của một phần tử. Tuyệt vời cho hình ảnh, nút hoặc bất kỳ yếu tố nào khác Ranh giớiSử dụng các tiện ích đường viền để thêm hoặc xóa đường viền của phần tử. Chọn từ tất cả các đường viền hoặc từng đường viền một Bootstrap bao gồm một số kiểu nút được xác định trước, mỗi kiểu phục vụ mục đích ngữ nghĩa riêng, với một vài tính năng bổ sung được đưa vào để kiểm soát nhiều hơn Sơ cấp Phụ thành công Thông tin cảnh báo nguy hiểm Sáng tối Liên kết Truyền đạt ý nghĩa cho các công nghệ hỗ trợViệc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung (e. g. văn bản hiển thị), hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp Vô hiệu hóa gói văn bảnNếu bạn không muốn văn bản của nút được ngắt dòng, bạn có thể thêm lớp Các lớp Khi sử dụng các lớp nút trên các phần tử các nút phác thảoCần một nút, nhưng không cần màu nền nặng nề mà chúng mang lại? Sơ cấp Phụ thành công Thông tin cảnh báo nguy hiểm Sáng tối Một số kiểu nút sử dụng màu nền trước tương đối sáng và chỉ nên được sử dụng trên nền tối để có đủ độ tương phản kích thướcFancy nút lớn hơn hoặc nhỏ hơn? trạng thái bị vô hiệu hóaLàm cho các nút trông không hoạt động bằng cách thêm thuộc tính boolean Các nút bị vô hiệu hóa sử dụng phần tử
Thông báo chức năng liên kếtĐể giải quyết các trường hợp bạn phải giữ thuộc tính nút chặnTạo các ngăn xếp đáp ứng các “nút chặn” có chiều rộng đầy đủ, giống như trong Bootstrap 4 với sự kết hợp giữa các tiện ích hiển thị và khoảng cách của chúng tôi. Bằng cách sử dụng các tiện ích thay vì các lớp cụ thể của nút, chúng tôi có quyền kiểm soát tốt hơn nhiều đối với khoảng cách, căn chỉnh và các hành vi phản hồi Ở đây, chúng tôi tạo một biến thể đáp ứng, bắt đầu với các nút được xếp chồng lên nhau theo chiều dọc cho đến điểm ngắt Bạn có thể điều chỉnh độ rộng của các nút khối bằng các lớp độ rộng cột lưới. Ví dụ: đối với "nút chặn" nửa chiều rộng, hãy sử dụng Các tiện ích bổ sung có thể được sử dụng để điều chỉnh căn chỉnh các nút khi nằm ngang. Ở đây, chúng tôi đã lấy ví dụ phản hồi trước đó của mình và thêm một số tiện ích linh hoạt và tiện ích lề trên nút để căn chỉnh các nút khi chúng không còn được xếp chồng lên nhau plugin nútPlugin nút cho phép bạn tạo các nút bật/tắt đơn giản Nhìn bề ngoài, các nút chuyển đổi này giống hệt với nút. Tuy nhiên, chúng được truyền đạt khác nhau bởi các công nghệ hỗ trợ. các nút chuyển đổi hộp kiểm sẽ được trình đọc màn hình thông báo là "đã chọn"/"không được chọn" (vì, mặc dù có vẻ ngoài như vậy, về cơ bản chúng vẫn là các hộp kiểm), trong khi các nút chuyển đổi này sẽ được thông báo là "nút"/"đã nhấn nút". Lựa chọn giữa hai cách tiếp cận này sẽ tùy thuộc vào loại chuyển đổi bạn đang tạo và việc chuyển đổi đó có ý nghĩa với người dùng hay không khi được thông báo dưới dạng hộp kiểm hoặc dưới dạng nút thực tế Chuyển trạng tháiThêm ________ 208 để chuyển trạng thái nút ________ 209. Nếu bạn đang chuyển đổi trước một nút, bạn phải thêm lớp Nút chuyển đổi Nút chuyển đổi đang hoạt động Nút chuyển đổi đã tắt phương phápVí dụ, bạn có thể tạo một phiên bản nút bằng hàm tạo nút Ví dụ: để chuyển đổi tất cả các nút ngổ ngáoBiếnhỗn hợpCó ba mixin cho các nút. mixin biến thể của nút và phác thảo nút (cả hai đều dựa trên vòng lặpCác biến thể của nút (đối với nút thông thường và nút phác thảo) sử dụng các mixin tương ứng của chúng với bản đồ |
