Trong series học Bootstrap 5 trên CodeTutHub, chúng ta sẽ khám phá một trong những thành phần phổ biến nhất: Alerts. Thành phần này giúp bạn hiển thị thông báo cho người dùng một cách rõ ràng và dễ dàng. Trong bài viết này, chúng ta sẽ đi qua các loại Alerts trong Bootstrap 5, các tùy chọn bổ sung, và cung cấp ví dụ minh họa chi tiết.
Giới thiệu về Alerts trong Bootstrap 5
Alerts là thành phần UI được thiết kế để hiển thị thông báo quan trọng, cảnh báo hoặc các trạng thái hệ thống khác. Bootstrap cung cấp các loại Alerts tích hợp sẵn với màu sắc và kiểu dáng khác nhau để truyền đạt ý nghĩa trực quan.
Cú pháp cơ bản để tạo một Alert:
<div class="alert alert-primary" role="alert">
Đây là một Alert dạng Primary!
</div>Các ví dụ:
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so
that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
<path
d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
<use xlink:href="#info-fill"/>
</svg>
<div>
An example alert with an icon
</div>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Giải thích các loại Alerts trong Bootstrap 5
Bootstrap cung cấp 8 loại Alerts mặc định, mỗi loại tượng trưng cho một trạng thái khác nhau:
1. Alert Primary
<div class="alert alert-primary" role="alert">
Đây là thông báo dạng Primary!
</div>2. Alert Secondary
<div class="alert alert-secondary" role="alert">
Đây là thông báo dạng Secondary!
</div>3. Alert Success
<div class="alert alert-success" role="alert">
Thông báo thành công (Success)!
</div>4. Alert Danger
<div class="alert alert-danger" role="alert">
Thông báo lỗi (Danger)!
</div>5. Alert Warning
<div class="alert alert-warning" role="alert">
Cảnh báo (Warning)!
</div>6. Alert Info
<div class="alert alert-info" role="alert">
Thông tin (Info)!
</div>7. Alert Light
<div class="alert alert-light" role="alert">
Thông báo nhẹ nhàng (Light)!
</div>8. Alert Dark
<div class="alert alert-dark" role="alert">
Thông báo tối (Dark)!
</div>Tùy chỉnh nội dung trong Alerts
Bạn có thể thêm văn bản, liên kết, hoặc bất kỳ HTML nào vào Alert:
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Chúc mừng!</h4>
<p>Bạn đã thực hiện thao tác thành công. Hãy tiếp tục theo dõi các bước tiếp theo.</p>
<hr>
<p class="mb-0">Xem thêm <a href="#" class="alert-link">tại đây</a>.</p>
</div>Kết quả:<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Chúc mừng!</h4> <p>Bạn đã thực hiện thao tác thành công. Hãy tiếp tục theo dõi các bước tiếp theo.</p> <hr> <p class="mb-0">Xem thêm <a href="#" class="alert-link">tại đây</a>.</p> </div>
Alert có thể đóng (Dismissible Alerts)
Bạn có thể thêm nút đóng vào Alert để cho phép người dùng ẩn nó. Sử dụng lớp .alert-dismissible cùng nút có data-bs-dismiss="alert":
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Đây là thông báo có thể đóng được!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>Giải thích:
.alert-dismissible: Cho phép Alert có thể bị đóng..fade show: Kích hoạt hiệu ứng khi hiển thị hoặc đóng Alert.btn-close: Nút đóng (x).
Tùy chỉnh bằng JavaScript
Bạn cũng có thể điều khiển Alerts thông qua JavaScript của Bootstrap 5:
Khởi tạo một Alert
var alertElement = document.querySelector('.alert');
var alert = new bootstrap.Alert(alertElement);Đóng Alert thông qua JavaScript
alert.close();Một số lưu ý khi sử dụng Alerts
- Sử dụng hợp lý các trạng thái màu sắc: Hãy chọn màu sắc phù hợp với nội dung bạn muốn truyền tải. Ví dụ:
- Xanh lá (
success) cho thông báo thành công. - Đỏ (
danger) cho lỗi hoặc thông báo quan trọng. - Vàng (
warning) để cảnh báo. - Xanh dương nhạt (
info) để cung cấp thông tin.
- Xanh lá (
- Đừng lạm dụng Alerts: Quá nhiều thông báo trên một trang có thể làm người dùng mất tập trung.
Kết luận
Alerts trong Bootstrap 5 là một công cụ mạnh mẽ để giao tiếp với người dùng thông qua giao diện. Với nhiều tùy chọn về kiểu dáng và chức năng, bạn có thể dễ dàng tích hợp Alerts vào dự án của mình một cách nhanh chóng và hiệu quả.
Hãy tiếp tục theo dõi CodeTutHub để cập nhật các bài viết mới nhất trong series học Bootstrap 5. Nếu bạn có bất kỳ câu hỏi hoặc ý tưởng nào, hãy để lại bình luận bên dưới nhé!
Chúc bạn học tốt!
0 Bình luận