Khởi động 5 nút
Kiểu nút
Bootstrap 5 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-success">Link Button</a>
<button type="button"
class="btn btn-success">Button</button>
<input type="button" class="btn
btn-success" value="Input Button">
<input type="submit" class="btn
btn-success" value="Submit Button">
<input type="reset" class="btn
btn-success" value="Reset 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 5 cũng cung cấp 8 nút viền/có viền.
Di chuyển chuột qua chúng để xem hiệu ứng "di chuột" bổ sung:
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
Để 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, hãy sử dụng lớp "trợ giúp" .d-grid
trên phần tử cha:
Ví dụ
<div class="d-grid">
<button type="button" class="btn btn-primary
btn-block">Full-Width Button</button>
</div>
Hãy tự mình thử » Nếu bạn có nhiều nút cấp khối, bạn có thể kiểm soát khoảng cách giữa chúng bằng lớp .gap-*
:
Ví dụ
<div class="d-grid gap-3">
<button type="button" class="btn btn-primary
btn-block">Full-Width Button</button>
<button type="button" class="btn btn-primary
btn-block">Full-Width Button</button>
<button type="button" class="btn btn-primary
btn-block">Full-Width Button</button>
</div>
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 BS5 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ử »