Trong bài viết này chúng ta sẽ học cách tạo và sử dụng Badges (Huy hiệu) trong Bootstrap 4 các bạn nhé!
Badges (Huy hiệu) là gì?
Huy hiệu là một ô nhỏ thể hiện thông tin bổ sung cho bất kỳ nội dung nào. Trong bootstrap 4 chúng ta sử dụng lớp .badge cùng với các lớp ngữ cảnh lớp theo ngữ cảnh (như .badge-Secondary) trong các phần tử <span> để tạo huy hiệu hình chữ nhật. Cần lưu ý tỷ lệ huy hiệu để phù hợp với kích thước của phần tử mẹ (nếu có):
Ví dụ:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Badges -Huy Hiệu</h2> <h1>Tin Hot <span class="badge badge-secondary">New</span></h1> <h2>Tin Hot <span class="badge badge-secondary">New</span></h2> <h3>Tin Hot <span class="badge badge-secondary">New</span></h3> <h4>Tin Hot <span class="badge badge-secondary">New</span></h4> <h5>Tin Hot <span class="badge badge-secondary">New</span></h5> <h6>Tin Hot <span class="badge badge-secondary">New</span></h6> </div> </body> </html> </body> </html>
Huy hiệu theo ngữ cảnh
Nếu bạn muốn tạo huy hiệu với các màu sắc nổi bật để người dùng cảm nhận được thông tin bên trong đó, bạn có thể dùng thêm các lớp ngữ cảnh như .badge-primary, .badge-secondary, .badge-success, .badge-warning, .badge-danger, .badge-info, .badge-light, và .badge-dark.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <span class="badge badge-primary">Thông tin chính</span> <span class="badge badge-secondary">Thông tin phụ</span> <span class="badge badge-success">Thao tác thành công</span> <span class="badge badge-danger">Nguy hiểm</span> <span class="badge badge-warning">Cảnh báo</span> <span class="badge badge-info">Thông tin cho nội dung</span> <span class="badge badge-light">Chữ màu sáng</span> <span class="badge badge-dark">Chữ màu tối</span> </div> </body> </html> </body> </html>
Huy hiệu hình viên thuốc ( Huy hiệu con nhộng)
Với bootstrap 4 chúng ta còn có thể tạo các huy hiệu hình con nhộng (giống viên thuốc). Để làm được như vậy, chúng ta chỉ cần sử dụng thêm lớp .badge-pill .
<div class="container"> <span class="badge badge-primary badge-pill">Thông tin chính</span> <span class="badge badge-secondary badge-pill">Thông tin phụ</span> <span class="badge badge-success badge-pill">Thao tác thành công</span> <span class="badge badge-danger badge-pill">Nguy hiểm</span> <span class="badge badge-warning badge-pill">Cảnh báo</span> <span class="badge badge-info badge-pill">Thông tin cho nội dung</span> <span class="badge badge-light badge-pill">Chữ màu sáng</span> <span class="badge badge-dark badge-pill">Chữ màu tối</span> </div>
Huy hiệu bên trong phần tử HTML
Trong Bootstrap chúng ta cũng có thể dùng huy hiệu bên trong 1 phần tử HTML hay kết hợp với các phần tử HTML để tạo ra nhiều hiệu ứng đồ họa đẹp mắt hơn. Ví dụ dưới đây tạo một huy hiệu bên trong các nút nhấn trong Bootstrap 4.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Các nút nhấn chứa huy hiệu</h3> <button type="button" class="btn btn-primary"> Hộp thư <span class="badge badge-light">1</span> </button> <button type="button" class="btn btn-info"> Đã gửi <span class="badge badge-pill badge-dark">2</span> </button> <button type="button" class="btn btn-danger"> Spam <span class="badge badge-warning">3</span> </button> <button type="button" class="btn btn-success"> Quan trọng <span class="badge badge-danger">4</span> </button> <button type="button" class="btn btn-warning"> Đã đánh dấu <span class="badge badge-pill badge-light">5</span> </button> </div> </body> </html> </body> </html>
Kết quả:
Lời kết:
Cách tạo hiệu trong Bootstrap 4 thật đơn giản phải không nào. Thông thường huy hiệu được sử dụng rất nhiều ở các thông báo, thanh điều hướng, nhóm nút nhấn ... nhằm tạo nên điểm nhấn tăng thẩm mỹ của website. Nếu còn vấn đề gì chưa hiểu các bạn hãy comment bên dưới nhé chúng mình sẽ giải đáp nhanh nhất có thể. Chúc các bạn học tốt!
