Bootstrap - Toasts: Hướng dẫn thân thiện cho người mới bắt đầu

Xin chào các nhà phát triển web tương lai! Hôm nay, chúng ta sẽ nhảy vào thế giới tuyệt vời của Bootstrap Toasts. Đừng lo lắng nếu bạn chưa từng nghe về chúng trước đây - vào cuối bài hướng dẫn này, bạn sẽ trở thành chuyên gia trong việc tạo Toast! ?

Toasts là gì?

Trước khi chúng ta bắt đầu, hãy nói về Toasts là gì. Hãy tưởng tượng bạn đang sử dụng một ứng dụng di động, và đột nhiên một thông báo nhỏ xuất hiện ở cuối màn hình của bạn. Đó chính là Toast trong phát triển web! Nó là một thông báo nhẹ nhàng được thiết kế để bắt chước các thông báo đẩy mà chúng ta thấy trên các thiết bị di động.

Toast cơ bản

Hãy bắt đầu với một Toast cơ bản. Dưới đây là cách nó trông trong mã:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 phút trước</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Đóng"></button>
</div>
<div class="toast-body">
Xin chào, thế giới! Đây là tin nhắn Toast.
</div>
</div>

Hãy phân tích nó:

• div ngoài cùng với lớp toast là bộ chứa chính của chúng ta.
• Bên trong, chúng ta có toast-header và toast-body.
• Header thường chứa một hình ảnh, tiêu đề, thời gian và nút đóng.
• Body là nơi chứa thông báo chính của chúng ta.

Toast sống động

Bây giờ, hãy làm cho Toast của chúng ta sống động! Để làm điều này, chúng ta cần một chút JavaScript:

<button type="button" class="btn btn-primary" id="liveToastBtn">Hiển thị toast sống động</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 phút trước</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Đóng"></button>
</div>
<div class="toast-body">
Xin chào, Thế giới! Đây là tin nhắn toast sống động.
</div>
</div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>

Ở đây, chúng ta đã thêm một nút mà khi nhấp vào sẽ hiển thị Toast. JavaScript ở dưới lắng nghe sự kiện nhấp và sau đó hiển thị Toast.

Toast trong suốt

Muốn làm cho Toast của bạn hơi trong suốt? Chỉ cần thêm lớp bg-light:

<div class="toast bg-light" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 phút trước</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Đóng"></button>
</div>
<div class="toast-body">
Xin chào, Thế giới! Đây là toast trong suốt.
</div>
</div>

Xếp chồng Toasts

Nếu bạn muốn hiển thị nhiều Toast? Không có vấn đề! Bootstrap sẽ xếp chúng gọn gàng:

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>ngay bây giờ</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Đóng"></button>
</div>
<div class="toast-body">
Nhìn thấy chưa? Như thế này.
</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>2 giây trước</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Đóng"></button>
</div>
<div class="toast-body">
Lưu ý, toast sẽ tự động xếp chồng
</div>
</div>
</div>

Nội dung tùy chỉnh

Toasts không chỉ giới hạn ở văn bản. Bạn có thể thêm bất kỳ nội dung HTML nào bạn thích:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Xin chào, thế giới! Đây là tin nhắn toast.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Thực hiện hành động</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Đóng</button>
</div>
</div>
</div>

Ở đây, chúng ta đã thêm các nút vào body của Toast. Hãy sáng tạo!

Bảng màu

Toasts có thể có nhiều màu khác nhau để phù hợp với chủ đề của trang web của bạn hoặc để chỉ ra các loại tin nhắn khác nhau:

<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 phút trước</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Đóng"></button>
</div>
<div class="toast-body">
Xin chào, thế giới! Đây là toast chủ đề chính.
</div>
</div>

Bạn có thể thay thế bg-primary bằng bg-success, bg-danger, bg-warning, v.v.

Đặt vị trí Toasts

Toasts có thể được đặt ở bất kỳ đâu trên trang của bạn. Dưới đây là cách để đặt nó ở góc trên bên phải:

<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Toast của bạn ở đây -->
</div>
</div>

Khả năng truy cập

Khả năng truy cập rất quan trọng! Hãy luôn bao gồm các thuộc tính role="alert" và aria-live="assertive" để đảm bảo rằng các trình đọc màn hình có thể thông báo Toast của bạn một cách chính xác.

Dưới đây là bảng tóm tắt các phương thức chính của Toast:

Phương thức	Mô tả
show()	Hiển thị Toast
hide()	Ẩn Toast
dispose()	Ẩn Toast và loại bỏ nó khỏi DOM

Và đó là tất cả! Bạn bây giờ đã là một chuyên gia về Toast. Hãy nhớ, thực hành làm cho hoàn hảo, vì vậy hãy thử tích hợp chúng vào dự án tiếp theo của bạn. Chúc may mắn với việc lập trình! ?

Credits: Image by storyset