bootstrap警告框的使用方法

這篇文章給大家分享的是有關bootstrap警告框的使用方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

警告框

將文本和一個可選擇的按鈕放在一起，就是一個警告框，使用警告框必須設置.alert，還有其他的類可供選擇。目前提供了成功、消息、警告或危險。

<div class="alert alert-success" role="alert">成功</div>
    <div class="alert alert-info" role="alert">你有一條新消息</div>
    <div class="alert alert-warning" role="alert">警告！！！</div>
    <div class="alert alert-danger" role="alert">本次操作危險，是否繼續？</div>

可關閉警告框

在警告框中加入.alert-dismissible 類和一個關閉按鈕，則成為一個可以關閉的警告框。為了保證該操作可行，需要給 <button> 元素添加 data-dismiss="alert" 屬性。

<div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>警告!</strong> 本次操作有風險，是否繼續？
</div>

警告中的鏈接

.alert-link 可以為鏈接設置與當前警告框相同的顏色。

 <div class="alert alert-success" role="alert">
        <a href="#" class="alert-link">成功</a>
      </div>
      <div class="alert alert-info" role="alert">
        <a href="#" class="alert-link">你有一條新消息</a>
      </div>
      <div class="alert alert-warning" role="alert">
        <a href="#" class="alert-link">警告！！！</a>
      </div>
      <div class="alert alert-danger" role="alert">
        <a href="#" class="alert-link">本次操作危險，是否繼續？</a>
    </div>

此次就不演示了，演示了圖片也看不出，還是自己親身實踐比較好。

感謝各位的閱讀！關于“bootstrap警告框的使用方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！