Bootstrap警告框（Alert）外掛使用方法

有以下兩種方式啟用警告框的可取消（dismissal）功能：

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

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>

效果圖：

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

1. 您可能感興趣的文章:

您可能感興趣的文章:

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