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

  • Cách tạo giao diện Responsive cho website với Bootstrap

    Để tìm hiểu Responsive Web Design là gì? Cách tạo giao diện Responsive cho website với Bootstrap như thế nào, bạn đọc cùng tham khảo tiếp bài học Bootstrap dưới đây của Taimienphi.vn.

  • Tạo Fluid Layout với Bootstrap

    Bài học bootstrap dưới đây Taimienphi.vn sẽ hướng dẫn bạn cách tạo Fluid Layout với Bootstrap. Ngoài ra bạn đọc có thể tham khảo một số bài viết đã có trên Taimienphi.vn để tìm hiểu cách tạo Fixed Layout trong Bootstrap hay tạo trang web...

  • Tạo Fixed Layout (bố cục cố định) với Bootstrap

    Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu cách tạo Fixed Layout (bố cục cố định) với Bootstrap. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học khác trên Taimienphi.vn để tìm hiểu cách Grid System trong Bootstrap, bố cục giao diện Responsive nhé.

  • STT tháng 12, chào tháng 12

    Không chỉ giúp bạn cảm nhận rõ nét được tháng 12 đang ngự trị mà những STT tháng 12 chào tháng 12 còn giúp bạn giãi bày được tâm trạng của mình khi tháng cuối cùng của một năm đã đến. Cùng đọc những Status tháng 12 này để cùng cảm nhận, trân quý những tháng ngày cuối cùng trong năm này nhé.


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá