Bootstrap基本外掛學習筆記之Alert警告框(20)

Bootstrap基本外掛學習筆記之Alert警告框(20)

和前面的模態對話方塊類似。

0x01 例子

先看一個簡單的例子:


<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<title>警告框</title>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>警告框</h1>
</div>
<div class="alert alert-danger fade in ">
警告!伺服器dang了
<a href="#" class="close" data-dismiss="alert">×</a>
</div>
</div>
</body>
</html>

效果如下:

0x02 事件

Alert警告框和模態對話方塊類似,也支援JS事件:

(1)close.bs.alert

當呼叫 close 例項方法時立即觸發該事件:


$('#myalert').bind('close.bs.alert', function () {
// 執行一些動作...
})

(2)closed.bs.alert

當警告框被關閉時觸發該事件(將等待 CSS 過渡效果完成):


$('#myalert').bind('closed.bs.alert', function () {
// 執行一些動作...
})

看一個例子:


<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<title>警告框</title>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>警告框</h1>
</div>
<div class="alert alert-danger fade in" id="myAlert">
警告!伺服器dang了
<a href="#" class="close" data-dismiss="alert">×</a>
</div>
</div>
<script>
$(function () {
$("#myAlert").bind('closed.bs.alert',function () {
alert("警告訊息框被關閉!");
});
})
</script>
</body>
</html>

如果大家還想深入學習,可以點選這裡進行學習,再為大家附3個精彩的專題:

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap外掛使用教程

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

您可能感興趣的文章:

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