[Bootstrap 4] Phần 12: Sử dụng huy hiệu (nhãn hiệu) trong Bootstrap 4

Khi thiết kế Web, bạn có thể để ý thấy các huy hiệu (hay nhãn hiệu, tiếng Anh là badge) là một ô nhỏ thể hiện thông tin cho nội dung nào đó. Để thể hiện huy hiệu trong Bootstrap, bạn có thể dùng lớp .badge và lớp bối cảnh (ví dụ .badge-secondary) bên trong các phần tử span.

Ví dụ tạo huy hiệu bên trong phần tử span như sau.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Huy hiệu 1 <span class="badge badge-secondary">Số 1</span> --- dammio.com</h1>
<h2>Huy hiệu 2 <span class="badge badge-secondary">Số 2</span></h2>
<h3>Huy hiệu 3 <span class="badge badge-secondary">Số 3</span></h3>
<h4>Huy hiệu 4 <span class="badge badge-secondary">Số 4</span></h4>
<h5>Huy hiệu 5 <span class="badge badge-secondary">Số 5</span></h5>
<h6>Huy hiệu 6 <span class="badge badge-secondary">Số 6</span></h6>
</div>
</body>
</html>

Huy hiệu kèm theo thông tin bối cảnh

Nếu bạn muốn tạo huy hiệu với các màu sắc để 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 như .badge-primary, .badge-secondary, .badge-success, .badge-warning, .badge-danger, .badge-info, .badge-light, và .badge-dark.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<span class="badge badge-primary">Thông tin chính --- dammio.com</span>
<span class="badge badge-secondary">Thông tin phụ</span>
<span class="badge badge-success">Thao tác nào đó 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>

Huy hiệu hình con nhộng

Ngoài việc tạo huy hiệu hình chữ nhật 4 góc bo tròn, bạn 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, bạn chỉ cần thêm lớp .badge-pill vào.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<span class="badge badge-primary badge-pill ">Thông tin chính --- dammio.com</span>
<span class="badge badge-secondary badge-pill ">Thông tin phụ</span>
<span class="badge badge-success badge-pill ">Thao tác nào đó 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>
</body>
</html>

Huy hiện bên trong một phần tử HTML khác

Bạn có thể dùng huy hiệu bên trong 1 phần tử HTML hoặc 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ụ tạo một huy hiệu bên trong 1 nút nhấn trong Bootstrap 4.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="container">
 
<h3>Các nút nhấn chứa huy hiệu --- dammio.com</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>
</div>
</body>
</html>

Ngoài ra, bạn còn có thể kết hợp huy hiệu ở thanh điều hướng, nhóm nút nhấn, dropdown box,… để tạo ra nhiều giao diện phong phú khác nhau.

Liên quan: [Bootstrap 4] Phần 4: Văn bản trong Bootstrap 4

Kết luận

Bài viết đã hướng dẫn cho bạn cách tạo huy hiệu trong Bootstrap, bạn có thể dùng huy hiệu để tăng tính thẩm mỹ và tạo sự phong phú giao diện website. Mời bạn tiếp tục theo dõi bài tiếp theo.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2019). [Bootstrap 4] Phần 12: Sử dụng huy hiệu (nhãn hiệu) trong Bootstrap 4. https://www.dammio.com/2019/08/08/bootstrap-4-phan-12-su-dung-huy-hieu-nhan-hieu-trong-bootstrap-4.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[Bootstrap 4] Phần 12: Sử dụng huy hiệu (nhãn hiệu) trong Bootstrap 4}, year = {2019}, url = {https://www.dammio.com/2019/08/08/bootstrap-4-phan-12-su-dung-huy-hieu-nhan-hieu-trong-bootstrap-4}, urldate = {2025-01-19} }

Theo dõi

1 Bình luận

Cũ nhất

Mới nhất Được bỏ phiếu nhiều nhất

Phản hồi nội tuyến

Xem tất cả bình luận

[Bootstrap 4] Phần 13: Thanh tiến trình | | DAMMIO

5 năm trước

[…] [Bootstrap 4] Phần 12: Sử dụng huy hiệu (nhãn hiệu) trong Bootstrap 4 – 08 tháng 08, 2019 lúc 11:35:59 Chiều […]

Trả lời

wpDiscuz

Kết nối

Huy hiệu kèm theo thông tin bối cảnh

Huy hiệu hình con nhộng

Huy hiện bên trong một phần tử HTML khác

Kết luận