Nút Bootstrap
Kiểu nút
Bootstrap cung cấp các kiểu nút khác nhau:
Để đạ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 cho thấy mã cho các kiểu nút khác nhau:
Thí 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>
Các lớp nút có thể được sử dụng trên một <a>, <button>hoặc
<input>phần tử:
Thí 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">
Tại sao chúng tôi đặt dấu # 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", chúng tôi đặt # làm liên kết trong các ví dụ của chúng tôi. 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 thước nút:
Các lớp xác định các kích thước khác nhau là:
.btn-lg.btn-sm.btn-xs
Ví dụ sau đây cho thấy mã cho các kích thước nút khác nhau:
Thí 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>
Các nút cấp độ khối
Một nút mức khối kéo dài toàn bộ chiều rộng của phần tử mẹ.
Thêm lớp .btn-blockđể tạo nút cấp khối:
Thí dụ
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Các nút hoạt động / bị vô hiệu hóa
Một nút có thể được đặt thành trạng thái hoạt động (xuất hiện khi nhấn) hoặc trạng thái tắt (không thể nhấn):
Lớp .activelàm cho một nút xuất hiện được nhấn và lớp
.disabled
làm cho một nút không thể bấm được:
Thí dụ
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Tham khảo hoàn chỉnh nút Bootstrap
Để 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 về nút Bootstrap đầy đủ của chúng tôi .