警告框概述

  警告框訊息大多是用來向終端使用者顯示如警告及確認訊息的。它與Java Script中的alert()不同，它不需要觸發器，直接顯示在頁面中，而不是通過彈窗

用法

• 建立<div>警告框容器，新增class="alert"
• 在警告框容器中新增樣式，如class="alert-info"、class="alert-success"
• 警告框預設會充滿整個螢幕，如果不想讓它充滿整個螢幕可以用到Bootstrap中的網格系統

  <div class="container">
      <div class="alert alert-success">
          <p>顯示了警告框</p>
      </div>
  </div>
 

執行結果

新增關閉按鈕

  在某些情況下我們需要關閉警告框，如何對警告框新增關閉按鈕呢？答案是通過BootstrapAPI中的data-dismiss，讓它的值為data-dismiss="alert"，這個是不是很熟悉，在模態框中我們對模態框添加了一個關閉按鈕就是通過data-dismiss="modal"。

  那麼這個data-dismiss屬性應該放在哪個標籤內呢？答案是建立一個<a class="close">&times</a>存放data-dismiss，&times建立關閉圖示

  <div class="container">
      <div class="alert alert-success">
          <a class="close" href="#" data-dismiss="alert">&times;</a>
          <p>顯示了警告框</p>
      </div>
  </div>
 

執行結果

選項

  沒有選項

方法

  alert的方法都建立在點選事件上所以Java Script中會有點選事件click。在點選事件中進行方法的呼叫

.alert():

$(function(){

      $('.close').click(function(){

        $("自定義類或者ID)".alert();

     });

})；

.alert(close)

$(function(){

  $(".close").click(function(){

   $("自定義類或者ID").alert(close);

    });

});

  <div class="container">
      <div class="alert alert-success">
          <a class="close" href="#" data-dismiss="alert">&times;</a>
          <p>顯示了警告框</p>
      </div>
      <div  class="alert alert-warning">
          <a class="close" data-dismiss="alert" href="#">&times;</a>
          <p>警告，出現問題！！</p>
      </div>
  </div>
  <script>
    $(function () {
        $(".close").click(function () {
            $(".alert").alert('close');
        });
    });
 </script>

執行結果：

點選關閉按鈕可出現兩個警告框同時關閉。因為應用了.alert(close)方法

事件

  Bootstrap事件的使用都大同小異，通過某一個觸發器觸發事件，進而對事件進行處理

 <div class="container">
      <div class="alert alert-success" id="myAlert">
          <a class="close" href="#" data-dismiss="alert">&times;</a>
          <p>顯示了警告框</p>
      </div>
  </div>
  <script>
    $(function () {
       $('#myAlert').bind('close.bs.alert',function () {
           alert("關閉了警告框");
       });
    });
 </script>

執行結果