Huy hiệu và nhãn Bootstrap
danh hiệu
Huy hiệu là chỉ báo bằng số về số lượng mục được liên kết với một liên kết:
Tin tức 5Bình luận 10
Cập nhật 2
Các số (5, 10 và 2) là huy hiệu.
Sử dụng lớp .badge
trong các phần tử <span>
để tạo huy hiệu:
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>
Hãy tự mình thử »Huy hiệu cũng có thể được sử dụng bên trong các thành phần khác, chẳng hạn như nút:
Ví dụ sau đây cho thấy cách thêm huy hiệu vào các nút:
Ví dụ
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
Hãy tự mình thử » Nhãn
Nhãn được sử dụng để cung cấp thêm thông tin về một cái gì đó:
Ví dụ mới
Ví dụ mới
Ví dụ mới
Ví dụ mới
Ví dụ mới
Ví dụ mới
Sử dụng lớp .label
, theo sau là một trong sáu lớp theo ngữ cảnh .label-default
, .label-primary
, .label-success
, .label-info
, .label-warning
hoặc .label-danger
, trong phần tử <span>
để tạo nhãn:
Ví dụ
<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>
Hãy tự mình thử »Ví dụ sau đây hiển thị tất cả các lớp nhãn theo ngữ cảnh:
Ví dụ
<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>
Hãy tự mình thử »