Hướng dẫn button size bootstrap - kích thước nút bootstrap
Sử dụng các kiểu nút tùy chỉnh Bootstrap, cho các hành động trong các biểu mẫu, hộp thoại và nhiều hơn nữa với sự hỗ trợ cho nhiều kích cỡ, trạng thái và hơn thế nữa. Show Ví dụ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 của riêng mình, với một vài tính năng bổ sung để kiểm soát nhiều hơn.
Truyền đạt ý nghĩa để hỗ trợ các công nghệSử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, sẽ không được chuyển đến người dùng các công nghệ hỗ trợ - chẳng hạn như đầu đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu là rõ ràng từ chính nội dung (ví dụ: văn bản có thể nhìn thấy) 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 2.Các lớp 3 được thiết kế để sử dụng với phần tử 4. Tuy nhiên, bạn cũng có thể sử dụng các lớp này trên các phần tử 5 hoặc 6 (mặc dù một số trình duyệt có thể áp dụng một kết xuất hơi khác).Khi sử dụng các lớp nút trên các phần tử 5 được sử dụng để kích hoạt chức năng trong trang (như nội dung sụp đổ), thay vì liên kết với các trang hoặc phần mới trong trang hiện tại, các liên kết này phải được cung cấp một cách thích hợp để truyền đạt mục đích của chúng để hỗ trợ công nghệ chẳng hạn như độc giả màn hình.
Các nút phác thảoCần một nút, nhưng không phải là màu nền khổng lồ mà chúng mang lại? Thay thế các lớp sửa đổi mặc định bằng các lớp 9 để xóa tất cả các hình ảnh và màu nền trên bất kỳ nút nào.
Kích thướcFancy lớn hơn hoặc nhỏ hơn các nút? Thêm 0 hoặc 1 cho các kích thước bổ sung.
Tạo các nút cấp khối, những người có chiều rộng đầy đủ của cha mẹ bằng cách thêm 2.
Trạng thái tích cựcCác nút sẽ xuất hiện được nhấn (với nền tối hơn, đường viền tối hơn và bóng hình nhỏ) khi hoạt động. Ở đó, không cần phải thêm một lớp vào 4 khi họ sử dụng một lớp giả. Tuy nhiên, bạn vẫn có thể buộc ngoại hình hoạt động tương tự với 4 (và bao gồm thuộc tính 5) nếu bạn cần sao chép trạng thái theo chương trình.There’s no need to add a class to 4s as they use a pseudo-class. However, you can still force the same active appearance with 4 (and include the 5 attribute) should you need to replicate the state programmatically.
Trạng thái 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 6 vào bất kỳ phần tử 4 nào.
Các nút bị vô hiệu hóa bằng phần tử 5 hoạt động khác một chút:
________số 8 Liên kết chức năng cảnh báoLớp 1 sử dụng 5 để cố gắng vô hiệu hóa chức năng liên kết của 5S, nhưng thuộc tính CSS đó chưa được chuẩn hóa. Ngoài ra, ngay cả trong các trình duyệt hỗ trợ 5, điều hướng bàn phím vẫn không bị ảnh hưởng, có nghĩa là người dùng bàn phím và người dùng công nghệ hỗ trợ vẫn có thể kích hoạt các liên kết này. Vì vậy, để được an toàn, hãy thêm thuộc tính 8 trên các liên kết này (để ngăn chúng nhận lấy nét bàn phím) và sử dụng JavaScript tùy chỉnh để vô hiệu hóa chức năng của chúng.Plugin nútLàm nhiều hơn với các nút. Trạng thái nút điều khiển hoặc tạo các nhóm nút cho nhiều thành phần hơn như thanh công cụ. Chuyển đổi trạng tháiThêm 9 để chuyển đổi trạng thái Nút 0. Nếu bạn có một nút trước, bạn phải thêm lớp 4 và 5 vào 4.and 5 to the 4.
Hộp kiểm và các nút radioCác kiểu Bootstrap từ 4 có thể được áp dụng cho các yếu tố khác, chẳng hạn như 5S, để cung cấp hộp kiểm hoặc nút chuyển đổi kiểu radio. Thêm 6 vào 7 chứa các nút đã sửa đổi đó để cho phép hành vi chuyển đổi của chúng thông qua JavaScript và thêm 8 để tạo kiểu 6 trong các nút của bạn. Lưu ý rằng bạn có thể tạo các nút hoặc nhóm được hỗ trợ đầu vào đơn.Note that you can create single input-powered buttons or groups of them.Trạng thái được kiểm tra cho các nút này chỉ được cập nhật qua sự kiện 0 trên nút. Nếu bạn sử dụng một phương thức khác để cập nhật đầu vào, ví dụ, với 1 hoặc bằng cách áp dụng thủ công thuộc tính đầu vào ____ ____52, bạn sẽ cần phải chuyển đổi 4 trên 5 theo cách thủ công.only updated via 0 event on the button. If you use another method to update the input—e.g., with 1 or by manually applying the input’s 2 property—you’ll need to toggle 4 on the 5 manually.Lưu ý rằng các nút được kiểm tra trước yêu cầu bạn thêm thủ công lớp ____24 vào đầu vào ____ ____45. 0 1Phương pháp
|