Tự học Bootstrap – Cơ bản – bài 09 – Định dạng nút bấm

Kiểu nút bấm

Bootstrap cung cấp 07 dạng nút bấm:

Để tạo ra các loại nút trên, Bootstrap cung cấp các lớp sau:

.btn-default

.btn-primary

.btn-success

.btn-info

.btn-warning

.btn-danger

.btn-link

Ví dụ sau hiển thị các kiểu nút bấm khác nhau:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>

Các lớp nút bấm có thể dùng trong các thẻ sau: <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">

Tại sao chúng ta đặt dấu # trong thuộc tính href của liên kết?
Bởi vì chúng ta không liên kết đến bất kỳ trang nào, và chúng ta không muốn có 01 thông báo lỗi "404", chúng ta đặt dấu # như là 01 liên kết.

---

Cỡ nút bấm

Bootstrap cung cấp cho chúng ta 04 cỡ nút bấm:

Các lớp xác định cỡ nút bấm là:

.btn-lg

.btn-md

.btn-sm

.btn-xs

Ví dụ sau: hiển thị các cỡ nút bấm khác nhau:

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

---

Các cấp độ nút dạng Block

01 nút bấm cấp độ block chiếm trọn bề rộng của đối tượng chứa nó.

Thêm lớp .btn-block để tạo 01 nút dạng block:

<button type="button" class="btn btn-primary btn-block">Button 1</button>

---

Nút kích hoạt/vô hiệu hóa

01 nút có thể được thiết lập có thể bấm hoặc tình trạng bị vô hiệu (không thể bấm):

Lớp .active tạo 01 nút có thể bấm được, và lớp .disabled tạo 01 nút không thể bấm được.

Ví dụ:

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>