Bootstrap 4 - Bootstrap Badges

Badge trong Bootstrap, khái niệm và cách sử dụng

Badge trong Bootstrap được sử dụng để làm nổi bật một số thông tin có giá trị trên trang web, chẳng hạn như các tiêu đề quan trọng, cảnh báo, .... Tham khảo tiếp bài viết trong seri học Bootstrap dưới đây của Taimienphi.vn để tìm hiểu cách tạo Badge trong Bootstrap.

Tạo Badge Trong Bootstrap

Ví dụ dưới đây minh họa cách tạo badge cho các phần tử hiện thị dưới dạng inline (nội tuyến) bằng cách sử dụng Bootstrap:

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

Xem ví dụ


 Lớp Ngữ Cảnh Cho Badge

Để thay đổi giao diện của badge, chúng ta có thể sử dụng các lớp ngữ cảnh hoặc lớp chỉnh sửa.

Ví dụ: trong ví dụ dưới đây chúng ta sử dụng các lớp ngữ cảnh và lớp chỉnh sửa để thay đổi giao diện badge:

<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-dark">Dark</span>
<span class="badge badge-light">Light</span>

Xem ví dụ


Tạo Badge Pill

Tương tự, chúng ta có thể tạo badge pill (tức là các badge được bo tròn góc) bàng cách sử dụng lớp .badge-pill, như trong ví dụ dưới đây:

<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-dark">Dark</span>
<span class="badge badge-pill badge-light">Light</span>

Xem ví dụ


Hiển Thị Số Đếm Trong Badge

Ngoài ra chúng ta có thể sử dụng badge như một phần của liên kết (link) hoặc nút (button) để hiển thị số đếm, chẳng hạn như số lượng tin nhắn đã nhận hoặc chưa đọc, số lượng các thông báo, ... mà chúng ta vẫn hay thấy trong các ứng dụng mail hay ứng dụng Facebook, ... .

Ví dụ: trong ví dụ dưới đây minh họa hiển thị số đếm trong Badge:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Profile</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link active">Messages <span class="badge badge-light">24</span></a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link">Notification <span class="badge badge-primary">5</span></a>
    </li>
</ul>

Xem ví dụ