By GokiSoft.com| 19:30 12/10/2020|
Tài Liệu Bootstrap

Bootstrap 4 Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Badges được sử dụng để thêm thông tin bổ sung cho bất kỳ nội dung nào. Sử dụng class .badge (hay .badge-secondary) trong thẻ <span>. Lưu ý rằng badges thay đổi kích thước để phù hợp với kích thước của phần tử cha (nếu có):

Ví dụ


<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>


Contextual Badges

Primary Secondary Success Danger Warning Info Light Dark

Sử dụng các class (.badge-*) để thay đổi màu badge:

Ví dụ


<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>


Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

Sử dụng class .badge-pill để làm tròn viền badges:

Ví dụ


<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>


Badge bên trong một thành phần khác

Một ví dụ về việc sử dụng Badge bên trong một button:

Ví dụ


<button type="button" class="btn btn-primary">
  Messages <span class="badge badge-light">4</span>
</button>




Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó