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

Trong bài học trước Taimienphi.vn đã hướng dẫn bạn cách tạo Pagination (phân trang) trong Bootstrap. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ hướng dẫn bạn cách tạo Badge trong Bootstrap.

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.

badge trong bootstrap hoc bootstrap

Badge trong Bootstrap

Mục Lục bài viết:
1. Tạo Badge trong Bootstrap
2. Lớp ngữ cảnh cho Badge
3. Tạo Badge Pill
4. Hiển thị số đếm trong Badge

 

1. 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:

badge trong bootstrap

Kết quả trả về có dạng như dưới đây:

badge trong bootstrap 2

 

2. 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:

badge trong bootstrap 3

Kết quả trả về có dạng như dưới đây:

badge trong bootstrap 4

 

3. 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:

badge trong bootstrap 5

Kết quả trả về có dạng như dưới đây:

badge trong bootstrap 6

 

4. 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:

badge trong bootstrap 7

Kết quả trả về có dạng như dưới đây:

badge trong bootstrap 8

Bài học trên đây Taimienphi.vn vừa hướng dẫn bạn cách tạo Badge trong Bootstrap. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiên của mình trong phần bình luận bên dưới bài viết nhé.

https://thuthuat.taimienphi.vn/badge-trong-bootstrap-51127n.aspx
Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thanh tiến trình Progress Bar trong Bootstrap.

Tác giả: Lê Thị Thuỷ     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Sự khác nhau giữa Internet và Web
Grid System trong Bootstrap
Web Freer - Đặt Web Freer làm trình duyệt mặc định trên máy tính
Thiết kế, tạo giao diện web bằng Photoshop
Web Scraping, Web Harvesting, hay Web Data Extraction là gì?
Từ khoá liên quan:

Badge trong Bootstrap

, Bootstrap, học Bootstrap,

SOFT LIÊN QUAN
  • Web Freer

    Trình duyệt web nhanh, hiệu quả

    Web Freer cho phép người dùng duyệt web, xem tin tức, nghe nhạc, xem phim... một cách dễ dàng và đơn giản. Nó cũng hỗ trợ người dùng mở nhiều tab thực hiện nhiều công việc trong một khoảng thời gian, thực hiện đánh dấu t ...

Tin Mới