Bootstrap 4 - Bootstrap Alerts

Các cảnh báo (Alerts) trong Bootstrap

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.

Để sử dụng các cảnh báo, bạn có thể dùng lớp .alert, theo sau là cách lớp bối cảnh: .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light và .alert-dark

Ví dụ:

<div class="container">
  <h2>Các cảnh báo (Alerts)</h2>
  <p>Cảnh báo được tạo bởi lớp .alert, theo sau là các lớp bối cảnh chứa màu sắc khác nhau:</p>
  <div class="alert alert-success">
    <strong>Thành công!</strong> Lớp alert-success.
  </div>
  <div class="alert alert-info">
    <strong>Thông tin!</strong> Lớp alert-info.
  </div>
  <div class="alert alert-warning">
    <strong>Báo động!</strong> Lớp alert-warning.
  </div>
  <div class="alert alert-danger">
    <strong>Nguy hiểm!</strong> Lớp alert-danger.
  </div>
  <div class="alert alert-primary">
    <strong>Chính!</strong> Lớp alert-primary.
  </div>
  <div class="alert alert-secondary">
    <strong>Phụ!</strong> Lớp alert-secondary.
  </div>
  <div class="alert alert-dark">
    <strong>Màu tối!</strong> Lớp alert-dark.
  </div>
  <div class="alert alert-light">
    <strong>Sáng!</strong> Lớp alert-light.
  </div>
</div>
 

Xem ví dụ


Các loại cảnh báo của Bootstrap

Ví dụ trên ta thấy Bootstrap 4 cung cấp tổng cộng 8 loại cảnh báo khác nhau. Ví dụ sau sẽ hiển thị cho bạn 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, cảnh báo 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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</button>
    </div>

Xem ví dụ

Ngoài ra, trong Bootstrap 4 giới thiệu các cảnh báo mới sử dụng cho nhiều mục đích khác nhau.

<div class="alert alert-primary alert-dismissible fade show">
    <strong>Primary!</strong> This is a simple primary alert box.
    <button type="button" class="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</button>
</div>

Xem ví dụ


Thêm nội dung cho Cảnh báo

Bạn cũng có thể đặt các thẻ HTML 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-warning alert-dismissible fade show">
    <h4 class="alert-heading"><i class="fa fa-warning"></i> Warning!</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="close" data-dismiss="alert">&times;</button>
</div>

Xem ví dụ


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

Sử dụng lớp .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ụ bên dưới:

 <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="close" data-dismiss="alert">&times;</button>
    </div>

Xem ví dụ

Ngoài ra, bạn có thể thêm liên kết bên trong các hộp cảnh báo khác, như được hiển thị trong 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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</button>
</div>

Xem ví dụ


Thêm hiệu ứng hoạt hình vào cảnh báo

Lớp .fade và lớp .show thêm hiệu ứng mờ dần khi click nút đóng cảnh báo.

<div class="alert alert-success alert-dismissible fade show">
    <strong>Success!</strong> Your message has been sent successfully.
    <button type="button" class="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</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="close" data-dismiss="alert">&times;</button>
</div>

Xem ví dụ


Đóng cảnh báo

Nếu bạn để ý, mỗi cảnh báo đều có dấu “x”, tức là bạn có đóng cảnh báo hay nhấn vào đó cảnh báo sẽ mất đi. Để làm được như vậy, bạn chỉ cần thêm lớp .alert-dismissible vào phần tử div chứa cảnh báo. Sau đó, thêm thuộc tính class=”close” và data-dismiss=”alert” vào một phần tử nút nhấn (button).

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

Xem ví dụ