Các nút là một thành phần rất hữu ích trong trang web. Nó được sử dụng rộng rãi trong các trang web để chuyển đổi các mục, điều hướng giữa các trang, v.v. Bootstrap 5 cung cấp nhiều lớp khác nhau để tùy chỉnh các nút. Bootstrap cung cấp các nút màu khác nhau, mỗi nút được đính kèm với một số ý nghĩa ngữ nghĩa
Các lớp nút Bootstrap
Sau đây là các lớp có thể được sử dụng để tạo và định kiểu các nút trong bootstrap
Loại nútmàu sắcÝ nghĩa/Hành động. btnlight greyCó thể được sử dụng cho bất kỳ hành động nào. btn-defaultlight greycó thể được sử dụng cho bất kỳ hành động nào. btn-primaryBlueĐược sử dụng cho một số hành động chính. btn-SuccessgreenCó thể được sử dụng làm nút gửi cho một số hành động thành công. btn-infolight blueCó thể được sử dụng cho mục đích thông tin. btn-link màu trắng được sử dụng cho các nút có thể nhấp. btn-dangerredused trong bối cảnh nguy hiểm. bt-warningyellowđược sử dụng trong bối cảnh cảnh báo. btn-secondarydark greycho một số hành động phụ. btn-darkblackkhông có ý nghĩa chung. btn-lightwhitekhông có ý nghĩa chungThêm màu nút Bootstrap
Thêm kiểu nút trên với. lớp btn để thêm màu cho các nút. Dưới đây là một ví dụ để hiển thị việc sử dụng các lớp này
Bootstrap
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
đầu ra
Đây là đầu ra của chương trình trên
Màu đường viền nút
Nếu bạn không muốn màu nền đậm cho các nút. Nhưng muốn một số nút có màu cho đường viền của nút thì sử dụng lớp .btn-outline
. Nó sẽ thêm màu vào đường viền của nút và văn bản bên trong. Đây là một chương trình để tùy chỉnh các nút với. btn-lớp phác thảo
Bootstrap
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link
đầu ra
Đây là đầu ra của chương trình trên
Sự kết luận
Màu được cung cấp trong Bootstrap 5 thêm ý nghĩa ngữ nghĩa cho các nút. Nó cũng tăng cường giao diện của các nút. Vì vậy, hãy thêm màu vào các nút bằng cách sử dụng màu đường viền hoặc màu nền