Các nút phản hồi được tạo bằng 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 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 đế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
Success
Danger
Warning
Info
9Trung tính
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
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
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
Làm tròn
Thêm lớp
Light
Dark
2 để làm tròn nút
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
đườ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
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Nổ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
Bạ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.
nú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 có sẵn 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
3hoặ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 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
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
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
0 để làm cho nút trông như đượ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
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
1 vào bất kỳ phần tử nào. Các nút đã tắt có
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
2 áp dụng cho, ngăn không cho kích hoạt trạng thái di chuột và hoạt động
Primary
Secondary
Tertiary
7
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
3Cá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útLink
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
- Một số kiểu thân thiện với tương lai được đưa vào để vô hiệu hóa tất cả
Primary Secondary Success Danger Warning Info Light Dark
- Các nút bị vô hiệu hóa khi sử dụng
Link
Primary Secondary Success Danger Warning Info Light Dark
- Các nút bị vô hiệu hóa sử dụng
Link
Primary Secondary Success Danger Warning Info Light Dark
Primary
Secondary
Tertiary
8Thô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
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
2 trên một liên kết bị vô hiệu hóa, lớp
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
7 sử dụng
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
2 để cố gắng vô hiệu hóa chức năng liên kết của
Link
3s. 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ợ
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
2, đ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, để đảm bảo an toàn, ngoài
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
0, còn bao gồm thuộc tính
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
9 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 để vô hiệu hóa 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 dừng
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
0, trong đó
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
1 thay thế lớp
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
2, do đó vô hiệu hóa tiện ích
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
3. 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
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
4. Căn giữa nó theo chiều ngang với cả
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
5
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
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
6 để chuyển đổi trạng thái
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
7 của một 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
0 và
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
9 vào