Các nút phản hồi được xây dựng với Bootstrap 5. Nhiều lớp kiểu nút được xác định trước. liên kết nút, phác thảo, nút tròn, xã hội, nổi, cố định và hơn thế nữa
Sử dụng các kiểu nút tùy chỉnh MDB 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.
Ghi chú. Đọc tab API để tìm tất cả các tùy chọn khả dụng và tùy chỉnh nâng cao
Video hướng dẫn
Ví dụ cơ bản
Sử dụng kiểu nút mặc định để biểu thị một hành động hoặc liên kết trong trang web của bạn
Button
Vô hiệu hóa gói văn bản
Nế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
Success
Danger
Warning
Info
6 vào nút. Trong Sass, bạn có thể đặt
Success
Danger
Warning
Info
7 để tắt gói văn bản cho mỗi nútHệ thống cấp bậc
Các nút, là một trong những thành phần giao diện người dùng chính, phải có hệ thống phân cấp riêng. Điều này có nghĩa là người dùng có thể dễ dàng xác định nút nào là quan trọng nhất [nút chính], nút nào ít quan trọng hơn [nút phụ] và nút nào trình bày thông tin hoàn toàn bổ sung [nút thứ ba]
Các yếu tố có nền và bóng mạnh mẽ, đầy màu sắc thu hút sự chú ý nhiều nhất, đó là lý do tại sao nút chính được tạo theo cách này
Nền tinh tế không có bóng sẽ kém hấp dẫn hơn, vì vậy nó rất phù hợp cho nút phụ
Việc thiếu nền và bóng làm cho phần tử ít được nhìn thấy nhất. Các tính năng này đặc trưng cho nút cấp ba
Ghi chú. Nút cấp ba có thể yêu cầu thêm lề. Nếu không có thêm lề, cạnh nút sẽ phẳng với các phần tử liền kề [đôi khi là kết quả mong muốn]. Nếu bạn cần ký quỹ - chỉ cần thêm các lớp tiện ích ký quỹ như
Success
Danger
Warning
Info
8
Primary
Secondary
Tertiary
theo ngữ cảnh
MDB 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
Success
Danger
Warning
Info
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 tới 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
Success
Danger
Warning
Info
9. Trung lập
Các nút trung tính cung cấp thêm màu sáng và tối
Light
Dark
liên kết
Nút liên kết tương tự như nút cấp ba [và thường được sử dụng thay thế]. Sự khác biệt là nút liên kết có nền khi di chuột và cũng có phần đệm mặc định
________số 8
Đề cương
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?
Trong các nút phác thảo, chúng tôi khuyên bạn nên thêm
Light
Dark
1 để thay đổi màu của hiệu ứng gợn sóng. Màu sáng mặc định của gợn sóng [được áp dụng tự động cho mọi nút] có thể không hiển thị rõ trong trường hợp các nút sáng và đường viềnĐể tìm hiểu thêm về hiệu ứng gợn sóng và tất cả các tùy chọn khả dụng, hãy xem Ripple Docs
Success
Danger
Warning
Info
1Mộ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
Làm tròn
Thêm lớp
Light
Dark
2 để làm tròn nút
Success
Danger
Warning
Info
1đường viền tròn
Bạn có thể sử dụng đồng thời
Light
Dark
0 và
Light
Dark
2 để tạo đường viền và làm tròn nút cùng một lúc
Success
Danger
Warning
Info
1Nổi
Sử dụng lớp
Light
Dark
5 để tạo nút hình trònĐể làm cho nó hoạt động bình thường, bạn phải đặt một biểu tượng bên trong. Các văn bản sẽ không phù hợp trong. Bạn có thể tìm thấy hàng trăm biểu tượng có sẵn trong tài liệu biểu tượng của chúng tôi
Success
Danger
Warning
Info
8Bạn có thể áp dụng gần như tất cả các lớp và thuộc tính giống nhau cho các nút nổi cũng như cho các nút thông thường - màu sắc, gợn sóng, kích thước, đường viền, v.v.
Success
Danger
Warning
Info
9nút cố định
Sử dụng lớp
Light
Dark
6 để tạo một nút cố định với danh sách các tùy chọn khả dụng hiển thị khi di chuột hoặc nhấp chuộtXem ví dụ trực tiếp về nút cố định ở góc dưới cùng bên phải của trang này
Ghi chú. Có sẵn các phương pháp
Light
Dark
7/
Light
Dark
8 để mở và đóng danh sách theo cách thủ công. Đọc tab API để tìm thêm thông tin
Primary
Secondary
Tertiary
0
Primary
Secondary
Tertiary
1Chữ
Bạn không cần chỉ sử dụng một biểu tượng. Bạn có thể thêm văn bản vào nút. Hãy nhớ thêm một số lớp giãn cách [ví dụ:
Light
Dark
9] để cung cấp khoảng cách thích hợp giữa biểu tượng và văn bản
Primary
Secondary
Tertiary
2biểu tượng duy nhất
Bằng cách loại bỏ các lớp nút và thay thế
Link
0 bằng
Link
1, bạn có thể tạo các biểu tượng tối giản, có thể nhấp được
Primary
Secondary
Tertiary
3Thẻ
Các lớp
Link
2 đượ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ử
Link
3 hoặc
Link
3 [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ử
Link
3 đượ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 đến 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
Link
6 để 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ư
Primary
Secondary
Tertiary
4
Link
7kích cỡ
Fancy nút lớn hơn hoặc nhỏ hơn?
Primary
Secondary
Tertiary
5trạng thái hoạt động
Thêm lớp
Success
Danger
Warning
Info
10 để làm cho nút được nhấn
Primary
Secondary
Tertiary
6trạ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
Success
Danger
Warning
Info
11 vào bất kỳ phần tử nào. Các nút đã tắt có
Success
Danger
Warning
Info
12 được áp dụng, ngăn kích hoạt trạng thái di chuột và hoạt động
Primary
Secondary
Tertiary
7
Success
Danger
Warning
Info
13Các nút bị vô hiệu hóa sử dụng phần tử
Link
3 hoạt động hơi khác một chút- Các
Link
Success Danger Warning Info
Success Danger Warning Info
- Một số kiểu thân thiện với tương lai được bao gồm để tắt tất cả
Success Danger Warning Info
- Các nút bị vô hiệu hóa khi sử dụng
Link
Success Danger Warning Info
- Các nút bị vô hiệu hóa khi sử dụng
Link
Success Danger Warning Info
Primary
Secondary
Tertiary
8Thông báo trước về 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
Success
Danger
Warning
Info
12 trên một liên kết bị vô hiệu hóa, lớp
Success
Danger
Warning
Info
17 sử dụng
Success
Danger
Warning
Info
12 để cố gắng vô hiệu hóa chức năng liên kết của các
Link
3. Lưu ý rằng thuộc tính CSS này chưa được chuẩn hóa cho HTML, nhưng tất cả các trình duyệt hiện đại đều hỗ trợ nó. Ngoài ra, ngay cả trong các trình duyệt hỗ trợ
Success
Danger
Warning
Info
12, đ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, ngoài
Success
Danger
Warning
Info
10, còn bao gồm thuộc tính
Success
Danger
Warning
Info
19 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 hoàn toàn chức năng của chúng.
Primary
Secondary
Tertiary
9nút chặn
Tạ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
Success
Danger
Warning
Info
0Ở đây, chúng tôi tạo một biến thể đáp ứng, bắt đầu bằng các nút được xếp chồng lên nhau theo chiều dọc cho đến điểm ngắt
Success
Danger
Warning
Info
10, trong đó
Success
Danger
Warning
Info
11 thay thế lớp
Success
Danger
Warning
Info
12, do đó vô hiệu hóa tiện ích
Success
Danger
Warning
Info
13. Thay đổi kích thước trình duyệt của bạn để xem chúng thay đổi
Success
Danger
Warning
Info
1Bạ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
Success
Danger
Warning
Info
14. Căn giữa nó theo chiều ngang với
Success
Danger
Warning
Info
15, quá
Success
Danger
Warning
Info
2Cá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
Success
Danger
Warning
Info
3Chuyển trạng thái
Thêm
Success
Danger
Warning
Info
16 để chuyển đổi trạng thái
Success
Danger
Warning
Info
17 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
Success
Danger
Warning
Info
10 và
Success
Danger
Warning
Info
19 vào