Trong bài lần trước chúng ta đã được làm quen với cách sử dụng glyphicon trong bootstrap 3 rồi phải không nào, trong bài này chúng ta tiếp tục tìm hiểu về cách dùng Badge và Label trong Bootstrap 3 các bạn nhé!
Badge trong Bootstrap 3
Badge dịch sang tiếng Việt có nghĩa là Huy hiệu là các chỉ số về số lượng mục (item) được liên kết với một liên kết:
- Các số (5, 10 và 2) là các huy hiệu.
- Sử dụng lớp .badge trong các phần tử <span> để tạo huy hiệu:
Ví dụ về Badge
Copy đoạn HTML sau chèn vào file index.html của bạn để xem kết quả:
<!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/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Huy hiệu Bootstrap 3</h2> <a href="#">Tin mới <span class="badge">5</span></a><br> <a href="#">Bình luận <span class="badge">10</span></a><br> <a href="#">Cập nhật <span class="badge">2</span></a> </div> </body> </html>
Huy hiệu cũng có thể được sử dụng bên trong các phần tử khác, chẳng hạn như các nút:
Ví dụ sau cho thấy cách thêm huy hiệu vào các nút:
Ví dụ
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
Nhãn (Label)
Nhãn được sử dụng để cung cấp thông tin bổ sung về điều gì đó:
Sử dụng lớp .label, theo sau là một trong sáu lớp theo ngữ cảnh .label-default, .label-primary, .label-success, .label-info, .label-warning, .label-risk, trong phần tử <span> để tạo nhãn:
Ví dụ :
<div class="container"> <h2>Labels</h2> <h1>Example <span class="label label-default">New</span></h1> <h2>Example <span class="label label-default">New</span></h2> <h3>Example <span class="label label-default">New</span></h3> <h4>Example <span class="label label-default">New</span></h4> <h5>Example <span class="label label-default">New</span></h5> <h6>Example <span class="label label-default">New</span></h6> </div>
Ví dụ sau cho thấy tất cả các lớp nhãn theo ngữ cảnh:
<div class="container"> <h2>Các lớp nhãn theo ngữ cảnh.</h2> <p>Các lớp ngữ cảnh có thể được sử dụng để tô màu cho nhãn.</p> <span class="label label-default">Default Label</span> <span class="label label-primary">Primary Label</span> <span class="label label-success">Success Label</span> <span class="label label-info">Info Label</span> <span class="label label-warning">Warning Label</span> <span class="label label-danger">Danger Label</span> </div>
Lời kết:
Như vậy bài viết này đã giúp các bạn học được cách sử dụng badge và label thông qua các lớp trong Bootstrap rồi đấy rất dễ dàng phải không nào? Chúc các bạn thành công!
