Bài 7: Sử dụng Badges trong Bootstrap

Bài 7: Sử dụng Badges trong Bootstrap

Bạn có thể dùng Badges trong Bootstrap để tạo một thành phần nhãn hiệu, số lượng…

Các bạn thường thấy ở các biểu tượng thông báo hiện số thông báo mới hoặc tạo nhãn hiệu new của các bài viết mới.

Ở bài trước chúng ta đã được tìm hiểu về Alert trong Bootstrap để tạo cảnh báo rồi, hãy tiếp tục bài học hôm nay nhé.

Badges trong Bootstrap là gì?

Badges trong Bootstrap được hiểu là một huy hiệu của một đối tượng nào đó. Bạn có thể tạo huy hiệu cho biểu tượng thông báo giống như thông báo mới của Google có biểu tượng quả chuông kèm theo số thông báo mới.

Bạn có thể tạo huy hiệu trên biểu tượng, nút bấm, các đoạn tiêu đề…

Một số ví dụ về Badges

Tạo Badges Bootstrap trên các tiêu đề

Bạn thường thấy ở các báo tin tức các bài viết mới hoặc tin hot thường có chữ “New” màu đỏ để tạo điểm nhấn, đó chính là Badges.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
		<h1>Tiêu đề H1 <span class="badge bg-danger">New</span></h1>
		<h2>Tiêu đề H2 <span class="badge bg-danger">New</span></h2>
		<h3>Tiêu đề H3 <span class="badge bg-danger">New</span></h3>
		<h4>Tiêu đề H4 <span class="badge bg-danger">New</span></h4>
		<h5>Tiêu đề H5 <span class="badge bg-danger">New</span></h5>
		<h6>Tiêu đề H6 <span class="badge bg-danger">New</span></h6>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

Tạo huy hiệu cho nút

Ví dụ như nút “Hộp thư đến” bạn có thể tạo Badges để hiển thị số thư chưa đọc, hoặc chỉ một điểm nhấn để biết được có tin mới.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
		 <!-- hiển thị số hộp thư mới -->
		<button type="button" class="btn btn-primary position-relative">
		Hộp thư đến
		<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
		99+
		<span class="visually-hidden">unread messages</span>
		</span>
		</button>
		<hr>
		<!-- hiển thị có hộp thư mới -->
		<button type="button" class="btn btn-primary position-relative">
		Hộp thư đến
		<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
		<span class="visually-hidden">New alerts</span>
		</span>
		</button>
    <!-- End Example Code -->
  </body>
</html>

Kết quả thu được là:

Tạo màu cho Badges

Bạn có thể sử dụng các class sau để tạo màu cho Badges trong Bootstrap:

  • text-bg-primary
  • text-bg-secondary
  • text-bg-success
  • text-bg-danger
  • text-bg-warning
  • text-bg-info
  • text-bg-light
  • text-bg-dark

Bạn cũng có thể bo tròn đường viền hơn nữa với thuộc tính: rounded-pill

Ví dụ:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">
    <!-- Example Code -->
	<span class="badge text-bg-primary rounded-pill">Primary</span>
	<span class="badge text-bg-secondary rounded-pill">Secondary</span>
	<span class="badge text-bg-success rounded-pill">Success</span>
	<span class="badge text-bg-danger">Danger</span>
	<span class="badge text-bg-warning">Warning</span>
	<span class="badge text-bg-info">Info</span>
	<span class="badge text-bg-light">Light</span>
	<span class="badge text-bg-dark">Dark</span>
    <!-- End Example Code -->
  </body>
</html>

Kết quả là:

Lời kết

Như vậy chúng ta đã tìm hiểu qua về Badges trong Bootstrap, hi vọng đem lại sự trải nghiệm tuyệt vời khi sử dụng nó.

Bài viết cùng chủ đề

Cảm ơn các bạn đã theo dõi.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *