Cảnh báo trong Bootstrap 4

Các thông điệp cảnh báo (alert) dùng để truyền thông tin đến người dùng về tình trạng của trang web hay kết quả của một hành động tương tác nào đó. Trong Bootstrap, các cảnh báo mặc định có gồm nhiều loại khác nhau và cũng như mỗi cảnh báo đều có màu sắc khác nhau.

Cảnh báo được tạo bằng lớp .alert theo sau là lớp ngữ cảnh: .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light.alert-dark.

Liên kết cảnh báo

Khi bạn muốn tạo liên kết cảnh báo trong thông điệp cảnh báo, bạn hãy thêm lớp .alert-link vào bất cứ liên kết nào bên trong thẻ đó.

Đóng cảnh báo

Nội dung trình bày trong Alert có thể là các dòng text hoặc bất kỳ HTML nào, có thể kích hoạt JS để bấm vào một nút close đóng lại Alert bằng cách cho thêm thiết lập lớp .alert-dismissible mặc định hiện thị với lớp .fade .show. Sau đó bên trong cho thêm một nút bấm .close gán cho nó thuộc tính data-dismiss=”alert”.

Hiệu ứng hoạt hình cho cảnh báo

Trong lúc nhấn nút “x” đóng cảnh báo, bạn có thể thêm 1 số hiệu ứng hoạt hình làm cảnh báo dần mờ đi bằng cách thêm lớp .fade.show theo ví dụ sau.

Dịch từ: https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp

Đăng ký nhận bộ tài liệu học Java trên 2 trang giấy tại đây

Xem thêm: Java Coding Bootcamp là gì? Tổng quan về Java Coding Bootcamp