Sử dụng các kiểu nút tùy chỉnh của Bootstrap cho các hành động trong biểu mẫu, hộp thoại, v.v. với sự hỗ trợ cho nhiều kích cỡ, trạng thái, v.v.
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 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
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
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
Link2
Các lớp
Link3 được thiết kế để sử dụng với phần tử. 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ử
Link4hoặc
Link4 [mặc dù một số trình duyệt có thể áp dụng kết xuất hơi khác một chút]
Khi sử dụng các lớp nút trên các phần tử
Link4 được sử dụng để kích hoạt chức năng trong trang [chẳng hạn như thu gọn nội dung], thay vì liên kết tớ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 cấp một ____1_______7 để truyền đạt mục đích của chúng một cách thích hợp tới các công nghệ hỗ trợ như
Link
Link8
các nút phác thảo
Cần một nút bấm, 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
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
kích thước
Fancy nút lớn hơn hoặc nhỏ hơn?
Large button
Large button
Small button
Small button
Tạo các nút cấp độ khối—những nút trải rộng toàn bộ chiều rộng của nút gốc—bằng cách thêm
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
2Nút cấp khối Nút cấp khối
Block level button
Block level button
trạng thái hoạt động
Các nút sẽ xuất hiện khi được nhấn [với nền tối hơn, đường viền tối hơn và bóng bên trong] khi hoạt động. Không cần thêm lớp vào s vì chúng sử dụng lớp giả. Tuy nhiên, bạn vẫn có thể buộc giao diện hoạt động tương tự với
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
3 [và bao gồm thuộc tính Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
4] nếu bạn cần sao chép trạng thái theo chương trìnhPrimary link
Link
trạng thái bị vô hiệu hóa
Làm cho các nút trông không hoạt động bằng cách thêm thuộc tính boolean
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
5 vào bất kỳyếu tốPrimary
Secondary
Success
Danger
Warning
Info
Light
Dark
6Các nút bị vô hiệu hóa sử dụng phần tử
Link4 hoạt động hơi khác một chút
Link
4s không hỗ trợ thuộc tính
5, vì vậy bạn phải thêm lớpPrimary Secondary Success Danger Warning Info Light Dark
0 để làm cho nó có vẻ như bị vô hiệu hóaLarge button Large button
- Một số kiểu thân thiện với tương lai được đưa vào để tắt tất cả
1 trên các nút neo. Trong các trình duyệt hỗ trợ thuộc tính đó, bạn sẽ hoàn toàn không thấy con trỏ bị vô hiệu hóaLarge button Large button
- Các nút bị tắt phải bao gồm thuộc tính
2 để cho biết trạng thái của phần tử đối với các công nghệ hỗ trợLarge button Large button
Primary link Link
Thông báo chức năng liên kết
Lớp
Large button
Large button
0 sử dụng Large button
Large button
4 để cố gắng vô hiệu hóa chức năng liên kết của các Link4, 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ợ
Large button
Large button
4, điều hướng bàn phím vẫn không bị ảnh hưởng, nghĩa là người dùng bàn phím có thị giác 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, để an toàn, hãy thêm thuộc tính Large button
Large button
7 trên các liên kết này [để ngăn chúng nhận tiêu điểm bàn phím] và sử dụng JavaScript tùy chỉnh để tắt chức năng của chúngplugin nút
Là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 nhóm nút cho nhiều thành phần hơn như thanh công cụ
Chuyển trạng thái
Thêm
Large button
Large button
8 để chuyển đổi trạng thái Large button
Large button
9 của nút. Nếu bạn đang chuyển đổi trước một nút, bạn phải thêm thủ công lớp Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
3 và Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
4 vàoSmall button
Small button
2Hộp kiểm và nút radio
Các kiểu
Small button
Small button
3 của Bootstrap có thể được áp dụng cho các phần tử khác, chẳng hạn như ____1_______4, để cung cấp hộp kiểm hoặc nút chuyển đổi kiểu radio. Thêm Small button
Small button
5 vào một Small button
Small button
6 chứa các nút đã sửa đổi đó để kích hoạt hành vi chuyển đổi của chúng thông qua JavaScript và thêm Small button
Small button
7 để tạo kiểu cho các Link4 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 lẻ
Trạng thái đã chọn cho các nút này chỉ được cập nhật thông qua sự kiện
Small button
Small button
9 trên nút. Nếu bạn sử dụng một phương pháp khác để cập nhật đầu vào—e. g. , với Link4 hoặc bằng cách áp dụng thuộc tính
Block level button
Block level button
1 của đầu vào theo cách thủ công—bạn sẽ cần chuyển đổi Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
3 trên Link4 theo cách thủ công
Lưu ý rằng các nút được kiểm tra trước yêu cầu bạn phải thêm thủ công lớp
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
3 vào lớp Link4 của đầu vào