快捷導(dǎo)航

Bootstrap警告（Alerts）的實(shí)現(xiàn)方法

更新時(shí)間：2017年03月22日 08:43:41 作者：boonyaxnn

這篇文章主要為大家詳細(xì)介紹了Bootstrap警告（Alerts）的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Bootstrap 所提供的用于警告的 class，可以通過(guò)創(chuàng)建一個(gè) <div>，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來(lái)添加一個(gè)基本的警告框。
html代碼

<div class="alert alert-success"> 
  成功！很好地完成了提交。 
</div> 
<div class="alert alert-info"> 
  信息！請(qǐng)注意這個(gè)信息。 
</div>

如果要?jiǎng)?chuàng)建一個(gè)可取消的警告（Dismissal Alert）步驟如下：

1、通過(guò)創(chuàng)建一個(gè) <div>，并向其添加一個(gè) .alert class 和四個(gè)上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來(lái)添加一個(gè)基本的警告框。

2、同時(shí)向上面的 <div> class 添加可選的 .alert-dismissable。

3、添加一個(gè)關(guān)閉按鈕。（按鈕可點(diǎn)擊關(guān)掉）

html代碼

<div class="alert alert-warning alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
          警告！請(qǐng)不要提交。 
  </div>  
<div class="alert alert-danger alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
           錯(cuò)誤！請(qǐng)進(jìn)行一些更改。 
  </div>

注意：請(qǐng)確保使用帶有 data-dismiss="alert" data 屬性的 <button> 元素。

html代碼

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bootstrap 頁(yè)面標(biāo)題（Page Header）</title> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
 
</head> 
 
<body> 
<div class="container"> 
  <div class="alert alert-success"> 
            成功！很好地完成了提交。 
  </div> 
  <div class="alert alert-info"> 
       信息！請(qǐng)注意這個(gè)信息。 
  </div>  
  <div class="alert alert-warning alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
          警告！請(qǐng)不要提交。 
  </div>  
  <div class="alert alert-danger alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
           錯(cuò)誤！請(qǐng)進(jìn)行一些更改。 
  </div> 
   
</div>  
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
  </body> 
</html>

效果圖：