Bootstrap警告框(Alert)外掛使用方法

Bootstrap警告框(Alert)外掛使用方法

有以下兩種方式啟用警告框的可取消(dismissal)功能:

1、通過 data 屬性:通過資料 API(Data API)新增可取消功能,只需要向關閉按鈕新增 data-dismiss=”alert”,就會自動為警告框新增關閉功能。

<a class=”close” data-dismiss=”alert” href=”#” rel=”external nofollow” rel=”external nofollow” rel=”external nofollow” aria-hidden=”true”>×</a> 

2、通過 JavaScript新增可取消功能:

$(“.alert”).alert() 

html程式碼


<div class="alert alert-success"> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert" aria-hidden="true">√</a> 
<strong>成功!</strong>您的網路連線已成功! 
</div> 

效果圖:

3、下面是一些警告框(Alert)外掛中有用的方法:

效果圖

4、下表列出了警告框(Alert)外掛中要用到的事件。這些事件可在函式中當鉤子使用。

html程式碼


<!DOCTYPE html> 
<html> 
<head> 
<title>Bootstrap 警告框(Alert)外掛</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >  
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<style> 
body{ 
font-size:24px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<h3>警告框(Alert)外掛 alert() 方法</h3> 
<div id="myAlert" class="alert alert-warning"> 
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert">×</a> 
<strong>警告!</strong>您的網路連線有問題。 
</div> 
<script type="text/javascript"> 
$(function() { 
$("div#myAlert").bind('click',function () { 
alert("警告訊息框被關閉。"); 
}); 
}); 
</script> 
</div> 
</body> 
</html> 

效果圖:

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

Bootstrap筆記之縮圖、警告框例項詳解Bootstrap縮圖與警告框學習使用bootstrap警告框使用方法解析Bootstrap基本外掛學習筆記之Alert警告框(20)Bootstrap每天必學之警告框外掛bootstrap警告框示例程式碼分享