Nút khởi động
Kiểu nút
Bootstrap cung cấp các kiểu nút khác nhau:
báo
Để đạt được các kiểu nút trên, Bootstrap có các lớp sau:
-
.btn -
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
Ví dụ sau đây hiển thị mã cho các kiểu nút khác nhau:
Ví dụ
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button> Hãy tự mình thử » Các lớp nút có thể được sử dụng trên phần tử <a> , <button> hoặc <input> :
Ví dụ
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button"> Hãy tự mình thử » Tại sao chúng ta đặt # trong thuộc tính href của liên kết?
Vì chúng tôi không có bất kỳ trang nào để liên kết nó và chúng tôi không muốn nhận được thông báo "404", nên chúng tôi đặt # làm liên kết trong ví dụ của mình. Nó phải là một URL thực đến một trang cụ thể.
Kích thước nút
Bootstrap cung cấp bốn kích cỡ nút:
Các lớp xác định các kích cỡ khác nhau là:
-
.btn-lg -
.btn-sm -
.btn-xs
Ví dụ sau đây hiển thị mã cho các kích thước nút khác nhau:
Ví dụ
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Hãy tự mình thử »Nút cấp độ khối
Nút cấp khối trải dài toàn bộ chiều rộng của phần tử gốc.
Thêm lớp .btn-block để tạo nút cấp khối:
Nút kích hoạt/tắt
Một nút có thể được đặt ở trạng thái hoạt động (xuất hiện khi nhấn) hoặc trạng thái bị vô hiệu hóa (không thể nhấp):
Lớp .active làm cho một nút có vẻ như được nhấn và lớp .disabled làm cho một nút không thể bấm được:
Ví dụ
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button> Hãy tự mình thử » Tham khảo nút Bootstrap hoàn chỉnh
Để có tài liệu tham khảo đầy đủ về tất cả các lớp nút, hãy truy cập Tài liệu tham khảo nút Bootstrap đầy đủ của chúng tôi.
