IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Bootstrap 4 Badges

by GokiSoft.Com - 19:30 12/10/2020 2,484 Lượt Xem

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>


Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!