IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Bootstrap 4 Alerts

by GokiSoft.Com - 19:30 12/10/2020 3,020 Lượt Xem

Bootstrap 4 Alerts

Bootstrap 4 cung cấp một cách dễ dàng để tạo alert messages:

Success! This alert box indicates a successful or positive action.
Info! This alert box indicates a neutral informative change or action.
Warning! This alert box indicates a warning that might need attention.
Danger! This alert box indicates a dangerous or potentially negative action.
Primary! This alert box indicates an important action.
Secondary! This alert box indicates a less important action.
Dark! Dark grey alert box.
Light! Light grey alert box.

Các Alert được tạo bởi class .alert, sau đó ta cũng có các class .alert-success.alert-info.alert-warning.alert-danger.alert-primary.alert-secondary.alert-light.alert-dark:

Ví dụ

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Alert Links

Bạn có thể thêm class alert-link cho link bên trong alert box:

Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
Primary! You should read this message.
Secondary! You should read this message.
Dark! You should read this message.
Light! You should read this message.

Ví dụ

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>


Closing Alerts (Đóng alert)

×Click on the "x" symbol to the right to close me.

Để đóng hộp alert, bạn hãy thêm class .alert-dismissible. Sau đó thêm class="close" và data-dismiss="alert" để khi click vào nút đóng bên cạnh nó sẽ làm hộp alert biến mất.

Ví dụ


<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Chú ý: ký tự &times; chính là dấu (×).


Animated Alerts

×Click on the "x" symbol to the right to close me. I will "fade" out.

Class .fade và .show tạo hiệu ứng fade khi đóng hộp alert:

Ví dụ

<div class="alert alert-danger alert-dismissible fade show">

Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!