Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
Check
in English

Cảnh báo

Cung cấp thông báo phản hồi theo ngữ cảnh cho các hành động thông thường của người dùng với một số thông báo cảnh báo có sẵn và linh hoạt.

Trên trang này

Các ví dụ

Cảnh báo có sẵn cho bất kỳ độ dài văn bản nào, cũng như nút đóng tùy chọn. Để tạo kiểu phù hợp, hãy sử dụng một trong tám lớp ngữ cảnh bắt buộc (ví dụ .alert-success:). Để loại bỏ nội tuyến, hãy sử dụng plugin JavaScript cảnh báo .

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp một dấu hiệu trực quan, điều này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc hiển thị rõ ràng từ chính nội dung (ví dụ: văn bản hiển thị) hoặc được đưa vào thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung bị ẩn với .visually-hiddenlớp.

Ví dụ trực tiếp

Nhấp vào nút bên dưới để hiển thị một cảnh báo (ẩn với các kiểu nội tuyến để bắt đầu), sau đó loại bỏ (và hủy) nó bằng nút đóng được tích hợp sẵn.

html 
<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

Chúng tôi sử dụng JavaScript sau để kích hoạt bản demo cảnh báo trực tiếp của chúng tôi:

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

const alert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    alert('Nice, you triggered this alert message!', 'success')
  })
}

Sử dụng .alert-linklớp tiện ích để nhanh chóng cung cấp các liên kết có màu phù hợp trong bất kỳ cảnh báo nào.

html 
<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Nội dung bổ sung

Cảnh báo cũng có thể chứa các phần tử HTML bổ sung như tiêu đề, đoạn văn và dấu phân chia.

html 
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

Biểu tượng

Tương tự, bạn có thể sử dụng các tiện ích flexbox và Biểu tượng Bootstrap để tạo cảnh báo với các biểu tượng. Tùy thuộc vào các biểu tượng và nội dung của bạn, bạn có thể muốn thêm nhiều tiện ích hoặc kiểu tùy chỉnh.

html 
<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

Cần nhiều hơn một biểu tượng cho cảnh báo của bạn? Cân nhắc sử dụng nhiều Biểu tượng Bootstrap hơn và tạo biểu tượng SVG cục bộ như vậy để dễ dàng tham chiếu lặp lại các biểu tượng giống nhau.

html 
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

Loại bỏ

Sử dụng plugin JavaScript cảnh báo, có thể loại bỏ bất kỳ cảnh báo nội dòng nào. Đây là cách thực hiện:

  • Đảm bảo bạn đã tải plugin cảnh báo hoặc JavaScript Bootstrap đã biên dịch.
  • Thêm nút đóng và .alert-dismissiblelớp, bổ sung thêm phần đệm ở bên phải của cảnh báo và định vị nút đóng.
  • Trên nút đóng, hãy thêm data-bs-dismiss="alert"thuộc tính, thuộc tính này sẽ kích hoạt chức năng JavaScript. Đảm bảo sử dụng <button>phần tử với nó để có hành vi phù hợp trên tất cả các thiết bị.
  • Để tạo hiệu ứng cho các cảnh báo khi loại bỏ chúng, hãy đảm bảo thêm .fadevà .showcác lớp.

Bạn có thể thấy điều này đang hoạt động với một bản demo trực tiếp:

html 
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Khi một cảnh báo bị loại bỏ, phần tử sẽ bị xóa hoàn toàn khỏi cấu trúc trang. Nếu người dùng bàn phím loại bỏ cảnh báo bằng cách sử dụng nút đóng, tiêu điểm của họ sẽ đột nhiên bị mất và tùy thuộc vào trình duyệt, đặt lại về đầu trang / tài liệu. Vì lý do này, chúng tôi khuyên bạn nên bao gồm JavaScript bổ sung lắng nghe closed.bs.alertsự kiện và đặt theo chương trình focus()đến vị trí thích hợp nhất trong trang. Nếu bạn định di chuyển tiêu điểm đến một phần tử không tương tác thường không nhận được tiêu điểm, hãy đảm bảo thêm tabindex="-1"vào phần tử đó.

CSS

Biến

Đã thêm vào v5.2.0

Là một phần của phương pháp tiếp cận các biến CSS đang phát triển của Bootstrap, các cảnh báo hiện sử dụng các biến CSS cục bộ được bật .alertđể tùy chỉnh thời gian thực nâng cao. Giá trị cho các biến CSS được đặt thông qua Sass, do đó, tùy chỉnh Sass cũng vẫn được hỗ trợ.

  --#{$prefix}alert-bg: transparent;
  --#{$prefix}alert-padding-x: #{$alert-padding-x};
  --#{$prefix}alert-padding-y: #{$alert-padding-y};
  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
  --#{$prefix}alert-color: inherit;
  --#{$prefix}alert-border-color: transparent;
  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
  --#{$prefix}alert-border-radius: #{$alert-border-radius};

Biến Sass

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Sass mixin

Được sử dụng kết hợp với $theme-colorsđể tạo các lớp bổ trợ theo ngữ cảnh cho các cảnh báo của chúng tôi.

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: shade-color($color, 20%);
  }
}

Vòng lặp Sass

Vòng lặp tạo ra các lớp bổ trợ với alert-variant()mixin.

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}

Hành vi JavaScript

Khởi tạo

Khởi tạo các phần tử dưới dạng cảnh báo

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

Với mục đích duy nhất là loại bỏ cảnh báo, không cần thiết phải khởi tạo thành phần theo cách thủ công thông qua JS API. Bằng cách sử dụng data-bs-dismiss="alert", thành phần sẽ được khởi tạo tự động và loại bỏ đúng cách.

Xem phần kích hoạt để biết thêm chi tiết.

Gây nên

Loại bỏ có thể đạt được với datathuộc tính trên một nút trong cảnh báo như được minh họa bên dưới:

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

hoặc trên một nút bên ngoài cảnh báo bằng cách sử dụng data-bs-targetnhư minh họa bên dưới:

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

Lưu ý rằng việc đóng một cảnh báo sẽ xóa nó khỏi DOM.

Phương pháp

Bạn có thể tạo một phiên bản cảnh báo với hàm tạo cảnh báo, ví dụ:

const bsAlert = new bootstrap.Alert('#myAlert')

Điều này làm cho một cảnh báo lắng nghe các sự kiện nhấp chuột trên các phần tử con có data-bs-dismiss="alert"thuộc tính. (Không cần thiết khi sử dụng tự động khởi tạo data-api.)

Phương pháp Sự mô tả
close Đóng một cảnh báo bằng cách xóa nó khỏi DOM. Nếu các .fadevà .showcác lớp có trên phần tử, cảnh báo sẽ mờ dần trước khi nó bị xóa.
dispose Hủy cảnh báo của một phần tử. (Xóa dữ liệu được lưu trữ trên phần tử DOM)
getInstance Phương thức tĩnh cho phép bạn nhận được phiên bản cảnh báo được liên kết với một phần tử DOM. Ví dụ bootstrap.Alert.getInstance(alert):.
getOrCreateInstance Phương thức static trả về một phiên bản cảnh báo được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo. bootstrap.Alert.getOrCreateInstance(element)Bạn có thể sử dụng nó như thế này :.

Cách sử dụng cơ bản:

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

Sự kiện

Plugin cảnh báo của Bootstrap cho thấy một vài sự kiện để kết nối với chức năng cảnh báo.

Biến cố Sự mô tả
close.bs.alert Kích hoạt ngay lập tức khi closephương thức thể hiện được gọi.
closed.bs.alert Kích hoạt khi cảnh báo đã được đóng và quá trình chuyển đổi CSS đã hoàn tất. 
const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})