Buzz
Badge trong Bootstrap không chỉ đơn giản là một yếu tố trang trí, mà còn là công cụ mạnh mẽ để làm nổi bật thông tin quan trọng. Hãy đọc tiếp trong bài viết này để hiểu rõ hơn về cách tạo Badge trong Bootstrap và áp dụng chúng vào trang web của bạn.
Badge trong Bootstrap: Kỹ thuật và ứng dụng thực tế
1. Tạo Badge trong Bootstrap
2. Sử dụng Lớp Ngữ Cảnh cho Badge
3. Tạo Badge Pill
4. Hiển Thị Số Lượng trong Badge
Dưới đây là ví dụ minh họa cách tạo badge cho các phần tử hiển thị dưới dạng nội tuyến bằng cách sử dụng Bootstrap:
Kết quả trả về sẽ có dạng như sau:
2. Sáng Tạo với Lớp Ngữ Cảnh cho Badge
Để đổi mới trong phong cách của badge, chúng ta có thể sử dụng các lớp ngữ cảnh hoặc lớp tinh chỉnh.
Ví dụ: Trong ví dụ dưới đây, chúng ta kết hợp các lớp ngữ cảnh và lớp tinh chỉnh để thay đổi hoàn toàn diện mạo của badge:
Kết quả trả về sẽ xuất hiện như sau:
3. Tạo Badge Pill: Sự Sáng Tạo trong Thiết Kế
Giống như vậy, chúng ta có thể tạo badge pill (nghĩa là các badge với góc bo tròn) bằng cách sử dụng lớp .badge-pill, như thể hiện trong ví dụ dưới đây:
Kết quả trả về sẽ thể hiện như sau:
4. Hiển Thị Số Lượng trong Badge
Ngoài ra, badge có thể được tích hợp như một phần của liên kết hoặc nút để thể hiện số đếm, chẳng hạn như số lượng tin nhắn chưa đọc, thông báo, ... mà chúng ta thường thấy trong ứng dụng email hoặc Facebook, ... .
Ví dụ: Dưới đây là minh họa hiển thị số đếm trong Badge:
Kết quả trả về sẽ hiển thị như sau:
Trên đây là bài học về cách tạo Badge trong Bootstrap từ Mytour. Nếu có thắc mắc hoặc câu hỏi, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết nhé.
Trong bài học sắp tới, Mytour sẽ chia sẻ thêm về thanh tiến trình Progress Bar trong Bootstrap. Hãy đón chờ những kiến thức mới và thú vị sắp được khám phá!
