Bài 11: Badges trong Bootstrap 4

0
276

Xin chào các bạn, hôm nay mình sẽ giới thiệu cho các bạn về Badges trong Bootstrap 4 nhé, đây là class sẽ giúp tạo ra các hộp nhỏ hiển thị dạng nội dung inline ngắn gọn lưu ý cho người dùng.

Badge là gì?

Badge là các đối tượng hiển thị giống như các nhãn dán label, các tag, 1 hộp nhỏ chứa nội dung để người dùng chú ý. Ví dụ sau tiêu đề bài viết có 1 dòng chữ thông báo là bài viết mới, bên cạnh giỏ hàng hiển thị số lượng sản phẩm, …

Sử dụng lớp .badge sau đó là các class định dạng .badge-* như .badge-primary, .badge-secondary, … để tạo ra 1 Badge.Một vài lớp bổ xung như .badge-primary, .badge-secondary, .badge-danger,.. giúp tạo ra mầu nền của Badge, bạn có thể dụng chúng trong các ngữ cảnh phù hợp.

  • badge-primary
  • badge-secondary
  • badge-success
  • badge-danger
  • badge-warning
  • badge-info
  • badge-light
  • badge-dark
  • badge-link

Cách sử dụng thì thường các bạn sử dụng class .badge cho các phần tử hiển thị dạng inline như thẻ <a>, thẻ <span>, …

Mặc định, các Badge được thiết lập kích thước Font bằng 75% so với kích thước Font của phần tử cha.

Bootstrap 4 quy định CSS cho các class này như sau:

Ví dụ Badge cơ bản

Badge Pill bo tròn

Nếu muốn các badge góc bo tròn hơn nữa thì thêm vào class .badge-pill

Bootstrap 4 quy định CSS cho class này như sau:

Ví dụ:

Badge cho phần tử link

Khi sử dụng .badge cho các link (phần tử <a> thì các link đó có hiệu ứng khi hover cho biết đang focus trên nó. Bootstrap 4 quy định CSS như sau:

Ví dụ:

Kết luận

Như vậy chúng ta đã tìm hiểu xong Badge trong Bootstrap 4. Hẹn lặp lại các bạn trong các bài viết tiếp theo.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây