Bootstrap Alert

Trong hướng dẫn này, bạn sẽ học cách tạo thông báo cảnh báo bằng Bootstrap Alert.

Tạo thông báo cảnh báo với Bootstrap

Hộp cảnh báo (alert) được sử dụng khá thường xuyên để làm nổi bật các thông tin cần sự chú ý ngay lập tức của người dùng cuối như thông báo cảnh báo, lỗi hoặc xác nhận.

Với Bootstrap, bạn có thể dễ dàng tạo các thông báo cảnh báo thanh lịch cho các mục đích khác nhau bằng cách thêm các lớp ngữ cảnh (ví dụ: .alert-success, .alert-warning, .alert-info, v.v.) vào lớp cơ sở. Bạn cũng có thể thêm một nút đóng tùy chọn để loại bỏ bất kỳ cảnh báo nào.

Bootstrap cung cấp tổng cộng 8 loại cảnh báo khác nhau. Ví dụ sau đây sẽ cho bạn thấy các cảnh báo thường được sử dụng nhất, đó là: thành công, lỗi hoặc nguy hiểm, thông tin và cảnh báo.

<!-- Success Alert -->
<div class="alert alert-success alert-dismissible fade show">
    <strong>Success!</strong> Your message has been sent successfully.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Error Alert -->
<div class="alert alert-danger alert-dismissible fade show">
    <strong>Error!</strong> A problem has been occurred while submitting your data.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Warning Alert -->
<div class="alert alert-warning alert-dismissible fade show">
    <strong>Warning!</strong> There was a problem with your network connection.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Info Alert -->
<div class="alert alert-info alert-dismissible fade show">
    <strong>Info!</strong> Please read the comments carefully.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

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

Tạo thông báo cảnh báo với Bootstrap

Đây là bốn cảnh báo Bootstrap còn lại có thể được sử dụng cho các mục đích khác nhau.

<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible fade show">
    <strong>Primary!</strong> This is a simple primary alert box.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Secondary Alert -->
<div class="alert alert-secondary alert-dismissible fade show">
    <strong>Secondary!</strong> This is a simple secondary alert box.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Dark Alert -->
<div class="alert alert-dark alert-dismissible fade show">
    <strong>Dark!</strong> This is a simple dark alert box.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Light Alert -->
<div class="alert alert-light alert-dismissible fade show">
    <strong>Light!</strong> This is a simple light alert box.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

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

Tạo thông báo cảnh báo với Bootstrap
Mẹo: Các lớp .fade.show trên phần tử .alert kích hoạt hiệu ứng chuyển tiếp mờ dần trong khi đóng các hộp cảnh báo. Nếu bạn không muốn hiệu ứng chỉ cần loại bỏ các lớp này. Ngoài ra, lớp .alert-dismissible được yêu cầu trên phần tử .alert để định vị nút .btn-close thích hợp. Nếu cảnh báo của bạn không có nút đóng, bạn có thể bỏ qua lớp này.

Thêm icon vào cảnh báo Bootstrap

Bạn cũng có thể đặt các icon bên trong cảnh báo Bootstrap. Bạn có thể sử dụng các icon Bootstrap hoặc các icon của bên thứ ba như Font Awesome. Hãy xem ví dụ sau:

<!-- Success Alert -->
<div class="alert alert-success alert-dismissible d-flex align-items-center fade show">
    <i class="bi-check-circle-fill"></i>
    <strong class="mx-2">Success!</strong> Your message has been sent successfully.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Error Alert -->
<div class="alert alert-danger alert-dismissible d-flex align-items-center fade show">
    <i class="bi-exclamation-octagon-fill"></i>
    <strong class="mx-2">Error!</strong> A problem has been occurred while submitting your data.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Warning Alert -->
<div class="alert alert-warning alert-dismissible d-flex align-items-center fade show">
    <i class="bi-exclamation-triangle-fill"></i>
    <strong class="mx-2">Warning!</strong> There was a problem with your network connection.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Info Alert -->
<div class="alert alert-info alert-dismissible d-flex align-items-center fade show">
    <i class="bi-info-circle-fill"></i>
    <strong class="mx-2">Info!</strong> Please read the comments carefully.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

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

Thêm icon vào cảnh báo Bootstrap

Thêm nội dung vào bên trong cảnh báo Bootstrap

Bạn cũng có thể đặt các phần tử HTML bổ sung như tiêu đề, đoạn văn và dấu phân chia bên trong một cảnh báo. Để quản lý khoảng cách giữa các phần tử, bạn có thể sử dụng các lớp tiện ích lề, như sau:

<div class="alert alert-danger alert-dismissible fade show">
    <h4 class="alert-heading"><i class="bi-exclamation-octagon-fill"></i> Oops! Something went wrong.</h4>
    <p>Please enter a valid value in all the required fields before proceeding. If you need any help just place the mouse pointer above info icon next to the form field.</p>
    <hr>
    <p class="mb-0">Once you have filled all the details, click on the 'Next' button to continue.</p>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

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

Thêm nội dung vào bên trong cảnh báo Bootstrap

Tạo màu liên kết bên trong cảnh báo Bootstrap

Bạn có thể áp dụng lớp tiện ích .alert-link cho các liên kết bên trong bất kỳ hộp cảnh báo nào để nhanh chóng tạo các liên kết có màu phù hợp, như thể hiện trong ví dụ dưới đây:

<div class="alert alert-warning alert-dismissible fade show">
    <strong>Warning!</strong> A simple warning alert with <a href="#" class="alert-link">an example link</a>.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

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

Tạo màu liên kết bên trong cảnh báo Bootstrap

Tương tự, bạn có thể tạo màu phù hợp cho các liên kết bên trong các hộp cảnh báo khác. Hãy thử ví dụ sau:

<!-- Success Alert -->
<div class="alert alert-success alert-dismissible fade show">
    <strong>Success!</strong> A simple success alert with <a href="#" class="alert-link">an example link</a>.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Error Alert -->
<div class="alert alert-danger alert-dismissible fade show">
    <strong>Error!</strong> A simple danger alert with <a href="#" class="alert-link">an example link</a>.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Warning Alert -->
<div class="alert alert-warning alert-dismissible fade show">
    <strong>Warning!</strong> A simple warning alert with <a href="#" class="alert-link">an example link</a>.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Info Alert -->
<div class="alert alert-info alert-dismissible fade show">
    <strong>Info!</strong> A simple info alert with <a href="#" class="alert-link">an example link</a>.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Primary Alert -->
<div class="alert alert-primary alert-dismissible fade show">
    <strong>Primary!</strong> A simple primary alert with <a href="#" class="alert-link">an example link</a>.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Secondary Alert -->
<div class="alert alert-secondary alert-dismissible fade show">
    <strong>Secondary!</strong> A simple secondary alert with <a href="#" class="alert-link">an example link</a>.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Dark Alert -->
<div class="alert alert-dark alert-dismissible fade show">
    <strong>Dark!</strong> A simple dark alert with <a href="#" class="alert-link">an example link</a>.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Light Alert -->
<div class="alert alert-light alert-dismissible fade show">
    <strong>Light!</strong> A simple light alert with <a href="#" class="alert-link">an example link</a>.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Đóng cảnh báo qua thuộc tính data

Thuộc tính data cung cấp một cách đơn giản và dễ dàng để thêm chức năng đóng các hộp cảnh báo.

Chỉ cần thêm thuộc tính data-bs-dismiss="alert" vào nút đóng và nó sẽ tự động cho phép loại bỏ hộp thông báo cảnh báo chứa nó. Ngoài ra, hãy thêm lớp .alert-dismissible vào phần tử .alert để định vị nút .btn-close phù hợp.

<div class="alert alert-info alert-dismissible fade show">
    <strong>Note!</strong> This is a simple example of dismissible alert.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Sử dụng phần tử <button> để tạo nút đóng cho hành vi nhất quán trên tất cả các thiết bị.

Đóng cảnh báo qua JavaScript

Bạn cũng có thể loại bỏ một cảnh báo qua JavaScript. Hãy thử một ví dụ và xem nó hoạt động như thế nào:

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myAlert").alert("close");
    });
});
</script>

Các phương pháp của Bootstrap Alert

Đây là các phương pháp chuẩn của bootstrap Alert:

close

Phương thức này đóng một cảnh báo bằng cách xóa nó khỏi DOM. Nếu các lớp .fade.show có trên phần tử, cảnh báo sẽ mờ dần trước khi nó bị xóa.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myAlert").alert("close");
    });
});
</script>

dispose

Phương thức này hủy cảnh báo của một phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).

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

getInstance

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

<script>
$(document).ready(function(){
    // Create alert instance
    $("#myAlert").alert();

    // Get alert instance on button click
    $("#myBtn").click(function(){
        var myAlert = bootstrap.Alert.getInstance($("#myAlert")[0]);
        console.log(myAlert);
        // {_element: div#myAlert.alert.alert-info.alert-dismissible.fade.show}
    });
});
</script>

getOrCreateInstance

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

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myAlert = bootstrap.Alert.getOrCreateInstance($("#myAlert")[0]);
        console.log(myAlert);
        // {_element: div#myAlert.alert.alert-info.alert-dismissible.fade.show}
    });
});
</script>

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

Lớp alert của Bootstrap bao gồm một số sự kiện để kết nối với chức năng cảnh báo.

Sự kiện Mô tả
close.bs.alert Sự kiện này kích hoạt ngay lập tức khi phương thức close được gọi.
closed.bs.alert Sự kiện này được kích hoạt khi cảnh báo đã được đóng và quá trình chuyển đổi CSS đã hoàn tất.

Ví dụ sau đây hiển thị thông báo cảnh báo cho người dùng khi quá trình chuyển đổi hộp thông báo cảnh báo đã hoàn tất.

<script>
$(document).ready(function(){
    $("#myAlert").on("closed.bs.alert", function(){
        alert("Alert message box has been closed.");
    });
});
</script>
BootstrapBootstrap Nâng Cao
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
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.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.