Bootstrap 4 nút
Kiểu nút
Bootstrap 4 cung cấp các kiểu nút khác nhau:
Thí 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>
Các lớp nút có thể được sử dụng trên <a>, <button>hoặc
<input>các 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 cuộc sống thực, tất nhiên nó phải là một URL thực đến trang "Tìm kiếm".
Đường viền nút
Bootstrap 4 cung cấp tám nút viền / viền:
Thí 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>
Kích thước nút
Sử dụng .btn-lglớp cho các nút lớn hoặc .btn-smlớp cho các nút nhỏ:
Thí 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>
Các nút cấp độ khối
Thêm lớp .btn-blockđể tạo 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í dụ
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</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à disabledthuộc tính làm cho một 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ị tắt và do đó phải sử dụng .disabledlớp để làm cho thuộc tính bị vô hiệu hóa một cách trực quan.
Thí 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>
Các nút Spinner
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 :
Thí 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>