Tự học Bootstrap - Cơ bản - bài 12 – Nhãn số và nhãn chữ

Nhãn số

Nhãn số lượng là phần số chỉ ra có bao nhiêu phần tử tương ứng với liên kết đó:

Các con số 5, 10, và 2 là các nhãn số.

Dùng lớp .badge trong thẻ <span> để tạo ra các nhãn số.

Ví dụ:

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

Các nhãn số cũng có thể được dùng bên trong các phần tử khác như nút bấm.

Ví dụ sau cho thấy cách thêm nhãn số vào trong nút.

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

---

Nhãn chữ

Nhãn chữ dùng cung cấp thông tin bổ sung về điều gì đó.

Ví dụ: New

Ví dụ: New

Ví dụ: New

Ví dụ: New

Ví dụ: New

Ví dụ: New

Dùng lớp .label , kèm theo 01 trong 06 lớp sau: .label-default, .label-primary, .label-success, .label-info, .label-warning hoặc .label-danger, bên trong 01 thẻ <span> để tạo 01 nhãn chữ.

<h1>Ví dụ: <span class="label label-default">New</span></h1>
<h2>Ví dụ: <span class="label label-default">New</span></h2>
<h3>Ví dụ: <span class="label label-default">New</span></h3>
<h4>Ví dụ: <span class="label label-default">New</span></h4>
<h5>Ví dụ: <span class="label label-default">New</span></h5>
<h6>Ví dụ: <span class="label label-default">New</span></h6>

Ví dụ sau cho thấy các lớp nhãn chữ:

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48