警報 (Alerts)

使用靈活的警報消息為使用者操作提供上下文的內容回饋。

六角學院 六角學院

六角學院的 Bootstrap 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 課程。

立即上課去

範例

警報可用於任何長度的內文,以及選擇性加入的關閉按鈕。正確的樣式,使用 8 個內文樣式 Class 的其中之一(例如.alert-success)。 對於行內的移除,請使用警報 jQuery 插件

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  This is a dark alert—check it out!
</div>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

連結顏色

使用 .alert-link 來快速為警報中的連結增添合適的色彩。

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

額外的內容

警報可以增加額外的 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>

解除

使用警報的 JavaScript 插件,他能夠將行內的警報移除,使用如下:

  • 請確認你有載入警報插件,或者是編譯後的 Bootstrap JavaScript。
  • 如果你要自行編譯 JavaScript,編譯的版本記得將 requires util.js 加入。
  • 加入解除用的按鈕並賦予 .alert-dismissible,如果你要將按鈕放在右上角的位置可以使用 .close
  • 解除用的按鈕加上 data-dismiss="alert" 屬性用來觸發 JavaScript 函式。請使用 <button> 元素,這可以在所有裝置上正常運行。
  • 要以動態方式解除它們,可以使用 .fade.show

看看以下的範例吧:

<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="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

JavaScript 行為

觸發

通過 JavaScript 插件啟用解除警報。

$(".alert").alert()

或者用 警報內 按鈕上的 data 屬性,如上所示:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

請注意,關閉警報會將其從 DOM 中刪除。

方法

方法 描述
$().alert() 發出警報,偵聽具有 data-dismiss="alert" 屬性的後代元素上的點擊事件。 (使用 data-api 的自動初始化時不需要)
$().alert('close') 從 DOM 中刪除來關閉警報。如果元素上出現 .fade.show,則在刪除之前該警報將淡出。
$().alert('dispose') 銷毀一個元素的警報
$(".alert").alert('close')

事件

Bootstrap 警報插件提供額外的事件,可以直接取用警報函式。

事件 描述
close.bs.alert 當調用 close 實例方法時,此事件會立即觸發。
closed.bs.alert 警報關閉時,會觸發此事件(等待CSS轉換完成)。
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})