Bootstrap 5 nút

Phong cách nút

Bootstrap 5 cung cấp nhiều phong cách nút khác nhau:

Mẫu

<button type="button" class="btn">cơ bản</button>
<button type="button" class="btn btn-primary">tầm quan trọng cao</button>
<button type="button" class="btn btn-secondary">tầm quan trọng thấp</button>
<button type="button" class="btn btn-success">thành công</button>
<button type="button" class="btn btn-info">thông tin</button>
<button type="button" class="btn btn-warning">cảnh báo</button>
<button type="button" class="btn btn-danger">nguy hiểm</button>
<button type="button" class="btn btn-dark">màu đậm</button>
<button type="button" class="btn btn-light">màu nhạt</button>
<button type="button" class="btn btn-link">liên kết</button>

Thử ngay

Loại nút có thể được sử dụng để <a>và<button> hoặc <input> Thành phần:

Mẫu

<a href="#" class="btn btn-success">nút liên kết</a>
<button type="button" class="btn btn-success">nút</button>
<input type="button" class="btn btn-success" value="nút nhập">
<input type="submit" class="btn btn-success" value="nút gửi">
<input type="reset" class="btn btn-success" value="nút đặt lại">

Thử ngay

Tại sao chúng tôi lại viết một # trong thuộc tính href của liên kết?}

Do chúng tôi không có bất kỳ trang nào có thể liên kết và chúng tôi không muốn nhận thông báo "404", vì vậy chúng tôi sẽ sử dụng # làm liên kết. Trong thực tế, nó nên là URL thực sự của trang "tìm kiếm".

nút đường viền

Bootstrap 5 cũng cung cấp tám nút đường viền/kết cấu.

Chuyển chuột đến trên chúng, bạn có thể nhìn thấy hiệu ứng "sweep":

Mẫu

<button type="button" class="btn btn-outline-primary">CHÍNH</button>
<button type="button" class="btn btn-outline-secondary">tERTIARY</button>
<button type="button" class="btn btn-outline-success">thành công</button>
<button type="button" class="btn btn-outline-info">Thông tin</button>
<button type="button" class="btn btn-outline-warning">cảnh báo</button>
<button type="button" class="btn btn-outline-danger">nguy hiểm</button>
<button type="button" class="btn btn-outline-dark">đen</button>
<button type="button" class="btn btn-outline-light text-dark">sáng</button>

Thử ngay

cỡ nút

sử dụng cho nút lớn .btn-lg loại, sử dụng cho nút nhỏ .btn-sm loại：

Mẫu

<button type="button" class="btn btn-primary btn-lg">lớn</button>
<button type="button" class="btn btn-primary">mặc định</button>
<button type="button" class="btn btn-primary btn-sm">nhỏ</button>

Thử ngay

nút khối

Nếu muốn tạo nút khối chiếm toàn bộ chiều rộng của phần tử cha, hãy sử dụng .d-grid "helper" 类：

Mẫu

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Nút toàn rộng</button>
</div>

Thử ngay

Nếu bạn có rất nhiều nút khối, bạn có thể sử dụng .gap-* Lớp kiểm soát khoảng cách giữa chúng:

Mẫu

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Nút toàn rộng</button>
  <button type="button" class="btn btn-primary btn-block">Nút toàn rộng</button>
  <button type="button" class="btn btn-primary btn-block">Nút toàn rộng</button>
</div>

Thử ngay

Nút hoạt động/vô hiệu hóa

Nút có thể được thiết lập thành trạng thái hoạt động (hiển thị như bị nhấn) hoặc vô hiệu hóa (không thể nhấp):

lớp .active Làm cho nút hiển thị như bị nhấn, trong khi disabled Thuộc tính làm cho nút không thể nhấp. .disabled Lớp làm cho nó hiển thị như bị vô hiệu hóa.

Mẫu

<button type="button" class="btn btn-primary active">Hoạt động chính</button>
<button type="button" class="btn btn-primary" disabled>Bạn bị vô hiệu hóa</button>
<a href="#" class="btn btn-primary disabled">Liên kết bị vô hiệu hóa</a>

Thử ngay

Nút tải

Bạn có thể thêm "spinner" vào nút, bạn sẽ học thêm về BS5 Spinner trong hướng dẫn của chúng tôi:

Mẫu

<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>
  Đang tải...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Đang tải...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Đang tải...
</button>

Thử ngay