Nút Bấm Bootstrap

Nút bấm là yếu tố tương tác quan trọng. Bootstrap cung cấp kiểu dáng đẹp, hiện đại, tiết kiệm code lặp lại.

Nút Màu (Colored Buttons)

Sử dụng class btn btn-* với các màu: primary, secondary, info, warning, danger, success, light, dark, link.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-danger">Danger</button>
...

Tất cả có padding đồng bộ, hiệu ứng hover chuyển màu đậm hơn.

Nút Viền (Outline Buttons)

Chỉ có viền, nền trong suốt: btn-outline-*. Màu chữ tự điều chỉnh tương phản. (Không hỗ trợ outline-link).

Kích Thước (Sizing)

Ba cỡ: btn-sm (nhỏ), mặc định (vừa), btn-lg (lớn).

<button class="btn btn-primary btn-sm">Nhỏ</button>
<button class="btn btn-primary">Vừa</button>
<button class="btn btn-primary btn-lg">Lớn</button>

Nút Chiều Rộng Đầy (Block Level)

Class btn-block làm nút rộng bằng container cha. Phổ biến cho form.

<button class="btn btn-lg btn-block btn-primary">Nút Rộng Đầy</button>

Trạng Thái (Button State)

Active

Class active: nền đậm hơn, có bóng.

Disabled

Class disabled: màu nhạt, nhưng vẫn bấm được. Để thực sự vô hiệu hóa, thêm thuộc tính disabled:

<button class="btn btn-primary" disabled>Thật Sự Vô Hiệu</button>

Với thẻ <a>, thuộc tính disabled không hoạt động, phải dùng class disabled + tabindex="-1" + aria-disabled="true".

Nhóm Nút (Button Groups)

Bao nút trong <div class="btn-group"> để gộp liền mép, bo góc ngoài.

<div class="btn-group">
  <button class="btn btn-primary">1</button>
  <button class="btn btn-warning">2</button>
</div>

Tóm Tắt

Bootstrap biến nút bấm thành thành phần đẹp, nhất quán, dễ tùy biến: màu, viền, cỡ, block, trạng thái, nhóm. Nút bấm là linh hồn tương tác web - hãy tận dụng Bootstrap!