4.九、Bootstrap V4自學之路------組件---提示

示例

Alert對任何長度的文本均可用，同時還能夠視狀況添加「抹除」按鈕。爲了適當的樣式，必須使用下文中四個類中的一個（例如，.alert-success）。對於行內的抹除，請使用alerts jQuery 插件。

<div class="alert alert-success" role="alert">
  <strong>作得好！</strong> 你成功地讀了這個重要的警告信息。
</div>
<div class="alert alert-info" role="alert">
  <strong>注意！!</strong> 這種警告須要你的注意，但它並不重要。
</div>
<div class="alert alert-warning" role="alert">
  <strong>警告！</strong> 更好的檢查本身，你不太好。
</div>
<div class="alert alert-danger" role="alert">
  <strong>哦忽然！</strong> 改變一些事情，並嘗試再次提交。
</div>

連接顏色

在一條alert中，使用.alert-link實用工具類能夠快速提供匹配的着色連接。

<div class="alert alert-success" role="alert">
  <strong>作得好！</strong> 你成功地讀了<a href="#" class="alert-link">這個重要的警告信息。</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>擡頭！</strong>這種 <a href="#" class="alert-link">警告須要你的注意</a>，但它並不重要。
</div>
<div class="alert alert-warning" role="alert">
  <strong>警告！</strong> 更好的檢查本身，你<a href="#" class="alert-link">不太好。</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>哦忽然！/strong> <a href="#" class="alert-link">改變一些事情，</a> 並嘗試再次提交。
</div>

PS：注意  .alert-link是加在<a>標籤中的。

抹除

使用提示JavaScript插件，就可能須要抹除任何內聯alert。下面是操做步驟：

• 確保你已經載入alert插件，或者已經載入編譯過的Bootstrap。

• 添加抹除按鈕，以及.alert-dismissible類。它會在提示的右邊添加額外的內填充，並放置.close按鈕。

• 在這個抹除按鈕上，添加data-dismiss="alert"屬性，它會觸發JavaScript功能。確保使用<button>元素，從而在全部設備上得到一致的行爲。

• 爲了在抹除它們時讓提示動畫起來，確保旋轉了.fade和.in類。

<div class="alert alert-warning alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>

PS：如今愈來愈感受  class="sr-only" 是一個很讚的東西了！

JavaScript行爲

觸發器

經過JavaScript啓用一條alert的抹除：

$(".alert").alert()

或者在alert內部的按鈕上添加一個data屬性，data-dismiss="alert"

PS:關閉這個按鈕，它將會在DOM中移除。

方法

添加

<div class="alert alert-warning alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>

<button type="button" onclick="test_alert()">TEST_01</button>

<script type="text/javascript">
  function test_alert(){
    $(".alert").alert("close");
  }
</script>

事件

Bootstrap的alert插件爲alert相關的回調函數提供了事件接口。

事件	描述
close.bs.alert	當調用close方法時，就會當即觸發該事件
closed.bs.alert	當提示被關閉時（須要等待CSS過渡完成），會觸發該事件

$('#myAlert').on('closed.bs.alert', function () {
   // do something…
})

這是個方法我以爲之後必定會用到。