警告框（Alert），玩转Bootstrap（JS插件篇）教程-慕课网

4-1 警告框（Alert）

本节编程练习不计算学习进度，请电脑登录imooc.com操作

警告框（Alert）

插件源文件：alert.js

引用地址：

http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-alert.min.js

样式文件：

LESS版本:源文件 alerts.less
Sass版本:源文件 _alerts.scss

编译后的Bootstrap文件：源文件bootstrap.css第4611行～第4685行。

在《玩转Bootstrap基础篇》中有介绍过Bootstrap警示框。警告框插件是在该组件的基础上添加单击 X 号能关闭警告框的功能。如下图所示：

任务

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>警告框（Alert）</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h3>示例</h3>
<div class="alert alert-success" role="alert">
    <button class="close"  data-dismiss="alert" type="button" >&times;</button>
    <p>恭喜您操作成功！</p>
</div>
 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
</body>
</html>