Màu nút
Cơ bản Mặc định Thông tin thành công chính Cảnh báo Liên kết nguy hiểm
Kích thước nút
Lớn Nhỏ XSmall
Các nút Kích hoạt/Tắt
Nút thông tin Nút thông tin hoạt động Nút thông tin bị vô hiệu hóa
Nút cấp khối
Nhóm nút
Các lớp nút
Các lớp bên dưới có thể được sử dụng để tạo kiểu cho bất kỳ , hoặc phần tử nào. Lớp Mô tảVí dụ. btnThêm kiểu dáng cơ bản cho bất kỳ nút nào Hãy dùng thử . btn-defaultCho biết nút mặc định/tiêu chuẩn Hãy dùng thử . btn-primaryCung cấp thêm trọng lượng hình ảnh và xác định hành động chính trong một nhóm nút Hãy dùng thử . btn-successCho biết một hành động thành công hoặc tích cực Hãy thử . btn-info Nút ngữ cảnh cho thông báo cảnh báo thông tin Hãy dùng thử . btn-warningCho biết nên thận trọng với hành động này Hãy thử . btn-danger Chỉ ra một hành động nguy hiểm hoặc có khả năng tiêu cực Hãy thử . btn-linkLàm cho một nút trông giống như một liên kết [sẽ vẫn có hành vi của nút] Hãy dùng thử . btn-lgTạo nút lớn Hãy dùng thử . btn-smTạo một nút nhỏ Hãy dùng thử . btn-xsTạo thêm một nút nhỏ Hãy dùng thử . btn-blockTạo nút cấp khối [kéo dài toàn bộ chiều rộng của phần tử gốc] Hãy dùng thử . activeLàm cho nút có vẻ như đã được nhấn Hãy dùng thử . bị vô hiệu hóa Làm cho nút bị vô hiệu hóa Hãy dùng thử . navbar-btn Căn chỉnh theo chiều dọc một nút bên trong thanh điều hướng Hãy dùng thử
Các lớp nhóm nút
Các lớp bên dưới có thể được sử dụng để tạo kiểu bất kỳ,
hoặc phần tử. Lớp Mô tảVí dụ. btn-groupNhóm các nút lại với nhau trên một dòng Hãy thử . btn-group-justifiedTạo một nhóm nút trải rộng trên toàn bộ chiều rộng của màn hình Hãy dùng thử . btn-group-lgNhóm nút lớn [làm cho tất cả các nút trong một nhóm nút lớn hơn - tăng cỡ chữ và phần đệm] Hãy dùng thử . btn-group-smNhóm nút nhỏ [làm cho tất cả các nút trong một nhóm nút nhỏ hơn] Hãy dùng thử . btn-group-xs Nhóm nút cực nhỏ [làm cho tất cả các nút trong một nhóm nút cực nhỏ] Hãy dùng thử . btn-group-verticalLàm cho nhóm nút xuất hiện xếp chồng lên nhau theo chiều dọc Hãy dùng thử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
Thê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ì hãy 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
Phần 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