警告是什麼？

  警告的英文單詞是Alerts，警告在Bootstrap中的作用是，為使用者定義了一種用於訊息通知樣式的方式。它們為典型的使用者提供了上下文反饋

建立警告框

• 建立一個帶有class="alerts"的<div>
• 在上面的<div>中新增警告樣式alerts-succes、alerts-info、alerts-danger、alerts-waring

 <div class="alert alert-danger">危險的警告框</div>
  <div class="alert alert-info">資訊的警告框</div>
  <div class="alert alert-warning">提示警告框</div>
  <div class="alert alert-success">成功警告框</div>
 

執行結果

建立帶有關閉按鈕的警告框

  要想建立帶有關閉按鈕的警告框，就必須得用JQuery的警告外掛

• 在<div class="alert">中新增class="alert-dismissable"
• 在上面的<div>中新增取消按鈕<button type="button" class="close" data-dismiss="alert">&times;</button>
• class="close"用了關閉的預定義類
• data-dismiss="alert"觸發關閉的控制元件（型別）是alert跟我們之前建立data-toggle的意思有點相似，data都是在做這方面的工作

  <div class="alert alert-danger alert-dismissable">危險的警告框
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
      &times;
  </button>
  </div>
  <div class="alert alert-info alert-dismissable">
      資訊的警告框
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          &times;
      </button>
  </div>
  <div class="alert alert-warning alert-dismissable">
      提示警告框
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          &times;
      </button>
  </div>
  <div class="alert alert-success">成功警告框
       <button class="close" type="button" aria-hidden="true">
           &times;
       </button>
  </div>
 

程式碼解讀：我們建立了四個警告框，每一個警告框我們都加了關閉按鈕，我們第一個警告框資訊在<button>之前，其餘的在<button>之後，這說明<button>關閉按鈕都會預設的在警告框的右邊，

  同時，這裡有兩個地方需要注意，①預設的警告框是會填充整個父元素的。②必須要填寫<button type="button" class="close" data-dismiss="alert">&times;</button>缺一不可

執行結果

點選關閉按鈕之後

建立帶有連線的警告框

  要想建立帶有連線的警告框非常簡單，你只需要

• 建立一個基本的警告框
• 在基本警告框中加入<a class="alert-link" href="#">即可

  <div class="alert alert-danger alert-dismissable"><a class="alert-link" href="#">危險的警告框</a>
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
      &times;
  </button>
  </div>
  <div class="alert alert-info alert-dismissable">
     <a href="#" class="alert-link"> 資訊的警告框</a>
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          &times;
      </button>
  </div>
  <div class="alert alert-warning alert-dismissable">
      <a class="alert-link" href="#">提示警告框</a>
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
          &times;
      </button>
  </div>
  <div class="alert alert-success"><a class="alert-link" href="#">成功警告框</a>
       <button class="close" type="button" aria-hidden="true">
           &times;
       </button>
  </div>

執行結果

  只有當滑鼠懸停時才會出現，連線樣式。