Hướng dẫn học Bootstrap
Badge trong Bootstrap 5 là một thành phần được sử dụng để hiển thị thông tin như số lượng, trạng thái hoặc thông báo trên giao diện của bạn. Đây là cách bạn có thể sử dụng badge trong Bootstrap 5:
Badge cơ bản
Để tạo một badge cơ bản, bạn có thể sử dụng lớp .badge:
htmlCopy code<span class="badge">Badge cơ bản</span>
Badge với màu sắc
Bạn có thể tùy chỉnh màu sắc của badge bằng cách sử dụng lớp .badge-{color}. Bootstrap 5 có sẵn các lớp màu như .badge-primary, .badge-secondary, .badge-success, .badge-danger, v.v.
htmlCopy code<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Badge tròn
Bạn có thể làm cho badge tròn bằng cách thêm lớp .rounded-pill:
htmlCopy code<span class="badge badge-primary rounded-pill">Tròn</span>
Badge trong nút
Bạn có thể đặt badge trong một nút bằng cách sử dụng nút của Bootstrap và đặt badge bên trong nút:
htmlCopy code<button class="btn btn-primary">
Thông báo <span class="badge bg-danger">5</span>
</button>
Badge trong danh sách
Badge cũng có thể được sử dụng trong danh sách để hiển thị số lượng hoặc thông tin liên quan:
htmlCopy code<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 1
<span class="badge bg-primary">3</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 2
<span class="badge bg-danger">7</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 3
<span class="badge bg-success">2</span>
</li>
</ul>
Đó là cách bạn có thể sử dụng badge trong Bootstrap 5 để hiển thị các thông tin như số lượng, trạng thái hoặc thông báo trên giao diện của bạn. Bạn có thể tùy chỉnh chúng bằng cách sử dụng các lớp màu và kiểu khác nhau để phù hợp với thiết kế của bạn.
Dưới đây là một ví dụ hoàn chỉnh về cách sử dụng badge trong Bootstrap 5 trong một trang HTML đơn giản:
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về Badge trong Bootstrap 5</title>
<!-- Liên kết với tệp CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>Ví dụ về Badge trong Bootstrap 5</h1>
<!-- Badge cơ bản -->
<span class="badge">Badge cơ bản</span>
<!-- Badge với màu sắc -->
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<!-- Badge tròn -->
<span class="badge badge-primary rounded-pill">Tròn</span>
<!-- Badge trong nút -->
<button class="btn btn-primary">
Thông báo <span class="badge bg-danger">5</span>
</button>
<!-- Badge trong danh sách -->
<ul class="list-group mt-3">
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 1
<span class="badge bg-primary">3</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 2
<span class="badge bg-danger">7</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 3
<span class="badge bg-success">2</span>
</li>
</ul>
</div>
<!-- Liên kết với tệp JavaScript Bootstrap (tùy chọn) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
Với mã HTML này, bạn có thể thấy cách sử dụng các loại badge trong Bootstrap 5 và cách chúng có thể được tích hợp vào giao diện web của bạn để hiển thị thông tin, trạng thái, hoặc số lượng. Điều này giúp tạo ra giao diện người dùng phong cách và dễ hiểu với Badge trong Bootstrap 5 – Hướng dẫn học Bootstrap.