Khởi động 4 nút
Kiểu nút
Bootstrap 4 cung cấp các kiểu nút khác nhau:
Ví dụ
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</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 các 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 thực tế, tất nhiên đó phải là một URL thực dẫn đến trang "Tìm kiếm".
Phác thảo nút
Bootstrap 4 cung cấp tám nút viền/có viền:
Ví dụ
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Hãy tự mình thử » Kích thước nút
Sử dụng lớp .btn-lg cho các nút lớn hoặc lớp .btn-sm cho các nút nhỏ:
Ví dụ
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Hãy tự mình thử »Nút cấp độ khối
Thêm lớp .btn-block để tạo nút cấp khối trải dài toàn bộ chiều rộng của phần tử cha.
Ví dụ
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button> Hãy tự mình thử »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 nút có vẻ như được nhấn và thuộc tính disabled làm cho nút không thể nhấp được. Lưu ý rằng các phần tử <a> không hỗ trợ thuộc tính bị vô hiệu hóa và do đó phải sử dụng lớp .disabled để làm cho nó trông có vẻ bị vô hiệu hóa.
Ví dụ
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a> Hãy tự mình thử »Nút quay
Bạn cũng có thể thêm "spinners" vào một nút mà bạn sẽ tìm hiểu thêm trong Hướng dẫn về spinners BS4 của chúng tôi :
Ví dụ
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
Hãy tự mình thử »