Badges trong Bootstrap 4
Chào các bạn, trong bài viết này chúng ta sẽ cùng nhau nghiên cứu các class badges trong bootstrap 4. Đây là một class có nhiều ứng dụng, trong đó tập trung vào tạo các thành phần cần nổi bật trên văn bản HTML. Ví dụ: notification number, review icon, highlight trạng thái, highlight bài viết mới / cũ
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
Sau đây, chúng ta cùng đi vào một vài đoạn code sử dụng class badge của bootstrap 4:
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:
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:
Kết luận
Như vậy chúng ta đã kết thúc bài học ở đây. Mình tin rằng các bạn đã hiểu và có thể sử dụng Badge trong Bootstrap 4 trong các dự án riêng của mình. Chúng ta sẽ gặp lại nhau trong bài học mới nhé.
- Posted by baobinhnet
- 2020-06-23 21:13:48