Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Tạo thông báo với Bootstrap toast

Thành phần Bootstrap toast mới được giới thiệu trong Bootstrap 4. Chúng là các thông báo nhẹ tương tự như thông báo đẩy được trình duyệt web hiển thị trên màn hình máy tính. Chúng được xây dựng bằng flexbox, vì vậy bạn có thể dễ dàng căn chỉnh và định vị chúng trên một trang web.

Ngoài ra, Bootstrap toast là tùy chọn vì lý do hiệu suất, vì vậy bạn phải tự khởi tạo chúng bằng phương thức toast(). Ngoài ra, Bootstrap toast sẽ tự động ẩn sau 5000 mili giây (5 giây), nếu bạn không chỉ định tùy chọn autohide: false. Bây giờ chúng ta hãy xem làm thế nào để tạo thông báo với Bootstrap toast.

Bước 1: Thêm mã cho Bootstrap toast

Mã cho Bootstrap toast khá đơn giản. Ví dụ sau đây sẽ chỉ cho bạn cách tạo thành phần toast với tiêu đề, nội dung và nút đóng.

<div class="toast" id="myToast">
    <div class="toast-header">
        <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
        <small>10 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
    </div>
</div>

Bước 2: Kích hoạt Toast

Toast có thể được kích hoạt thông qua JavaScript - chỉ cần gọi phương thức toast() của Bootstrap với bộ chọn CSS id hoặc class của phần tử đích trong mã JavaScript của bạn.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myToast").toast("show");
    });
});
</script>

Kết quả của ví dụ trên sẽ giống như sau:

Thay đổi màu của Bootstrap toast

Bạn có thể sử dụng các lớp tiện ích màu và nền để tạo Bootstrap toast với các cách phối màu khác nhau.

Ví dụ sau đây sẽ tạo ra một Bootstrap toast với nền màu xanh lam và văn bản màu trắng.

<div class="toast bg-primary text-white fade show">
    <div class="toast-header bg-primary text-white">
        <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
        <small>10 mins ago</small>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        It's been a long time since you visited us. We've something special for you. <a href="#" class="text-white">Click here!</a>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Xếp nhiều Bootstrap toast theo chiều dọc

Bạn có thể xếp nhiều Bootstrap toast theo chiều dọc bằng cách chỉ cần bọc chúng trong toast container, điều này sẽ thêm một số khoảng cách theo chiều dọc. Hãy xem ví dụ sau:

<div class="toast-container">
    <div class="toast fade show">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
            <small>just now</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            This is a basic toast message.
        </div>
    </div>

    <div class="toast fade show">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
            <small>5 seconds ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            See? This is another toast message.
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Vị trí của Bootstrap toast

Bạn có thể đặt Bootstrap toast ở bất kỳ đâu trên trang web của mình bằng cách sử dụng định vị CSS tùy chỉnh. Tuy nhiên, các vị trí như phía trên bên phải, phía dưới bên phải hoặc phía trên ở giữa được khuyến nghị cho các thông báo.

Ngoài ra, nếu bạn chỉ muốn hiển thị một Bootstrap toast tại một thời điểm, hãy đặt css định vị nội tuyến (tức là trực tiếp trên phần tử .toast). Hãy thử một ví dụ và xem nó hoạt động như thế nào:

<div class="toast-container" style="position: absolute; top: 10px; right: 10px;">
    <div class="toast fade show">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
            <small>just now</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            This is a basic toast message.
        </div>
    </div>

    <div class="toast fade show">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi-globe"></i> Hello, world!</strong>
            <small>5 seconds ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            See? This is another toast message.
        </div>
    </div>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Các tùy chọn của Bootstrap toast

Có một số tùy chọn nhất định có thể được truyền cho phương thức toast() của Bootstrap để tùy chỉnh chức năng của Bootstrap toast. Các tùy chọn có thể được truyền qua các thuộc tính data hoặc JavaScript.

Để đặt các tùy chọn cho Bootstrap toast thông qua các thuộc tính data, chỉ cần thêm tên tùy chọn vào data-bs-, chẳng hạn như data-bs-autohide="false", data-bs-delay="3000", v.v.

Thuộc tính data cung cấp một cách dễ dàng để thiết lập các tùy chọn cho Bootstrap toast, tuy nhiên JavaScript là cách thích hợp hơn vì nó ngăn bạn khỏi công việc lặp đi lặp lại. Xem các ví dụ về truyền các tùy chọn trong phần phương thức bên dưới để biết cách đặt tùy chọn cho Bootstrap toast bằng JavaScript.

Trong ví dụ sau, chúng tôi đã đặt tùy chọn autohide thành false sử dụng thuộc tính data (dòng số 1) ngăn Bootstrap toast tự động đóng.

<div class="toast" id="myToast" data-bs-autohide="false">
    <div class="toast-header">
        <strong class="me-auto"><i class="bi-gift-fill"></i> We miss you!</strong>
        <small>10 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a>
    </div>
</div>

Các phương thức của Bootstrap toast

Đây là các phương thức chuẩn của Bootstrap toast:

Cách truyền các tùy chọn cho Bootstrap toast

Bạn có thể truyền các tùy chọn vào Bootstrap toast bằng cách sử dụng đối tượng options.

Mã ví dụ sau sẽ ngăn Bootstrap toast tự động đóng lại.

<script>
$(document).ready(function(){
    $("#myToast").toast({
        autohide: false
    }); 
});
</script>

Đoạn mã ví dụ sau sẽ tăng thời gian tự động ẩn của Bootstrap toast lên 10 giây.

<script>
$(document).ready(function(){
    $("#myToast").toast({
        delay: 10000
    }); 
});
</script>

show

Phương thức này được sử dụng để hiển thị Bootstrap toast.

<script>
$(document).ready(function(){
    $(#myBtn").click(function(){
        $("#myToast").toast("show");
    });
});
</script>

hide

Phương thức này được sử dụng để ẩn Bootstrap toast. Bạn phải gọi phương thức này theo cách thủ công nếu bạn đặt autohide thành false.

<script>
$(document).ready(function(){
    $(#myBtn").click(function(){
        $("#myToast").toast("hide");
    });
});
</script>

dispose

Phương thức này ẩn Bootstrap toast của một phần tử. Bootstrap toast sẽ vẫn còn trên DOM nhưng sẽ không hiển thị nữa.

<script>
$(document).ready(function(){
    $(#myBtn").click(function(){
        $("#myToast").toast("dispose");
    });
});
</script>

getInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của Bootstrap toast được liên kết với một phần tử DOM.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myToast = bootstrap.Toast.getInstance($("#myToast")[0]);
        console.log(myToast);
        // {_element: div#myToast.toast.fade.show, _config: {…}, _timeout: null, _hasMouseInteraction: false, _hasKeyboardInteraction: false}
    });
});
</script>

getOrCreateInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của Bootstrap toast được liên kết với một phần tử DOM hoặc tạo một instance mới trong trường hợp Bootstrap toast không được khởi tạo.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myToast = bootstrap.Toast.getOrCreateInstance($("#myToast")[0]);
        console.log(myToast);
        // {_element: div#myToast.toast.fade.show, _config: {…}, _timeout: null, _hasMouseInteraction: false, _hasKeyboardInteraction: false}
    });
});
</script>

Mẹo: Các phương thức tĩnh không thể được gọi trên instance của lớp (tức là các đối tượng). Chúng được gọi trực tiếp từ lớp. Từ khóa static được sử dụng để định nghĩa một phương thức tĩnh cho một lớp.

Các sự kiện của Bootstrap toast

Lớp toast của Bootstrap bao gồm một số sự kiện để kết nối vào chức năng phương thức.

Ví dụ sau sẽ hiển thị một thông báo cảnh báo cho người dùng khi quá trình chuyển đổi Bootstrap toast mờ dần đã hoàn tất. Chúng ta hãy dùng thử và xem nó hoạt động như thế nào:

<script>
$(document).ready(function(){
    $("#myToast").on("hidden.bs.toast", function(){
        alert("Toast component has been completely closed.");
    });
});
</script>

Bootstrap • Bootstrap Nâng Cao