警告消息大多来是用来向终端用户提示警告或确认的消息，使用警告框插件，您可以向所有的警告框消息添加取消功能。

用法

您有以下两种方式启用警告框的可取消功能。

1、通过data属性：通过数据添加可取消功能(data api),只需要要向关闭按钮添加data-dismissal="alert"，就会自动为警告框添加关闭功能。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：警告框(Alert)插件</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<div class="alert alert-warning">
<a class="close" data-dismiss="alert" aria-hidden="true">&times;</a>
<strong>警告！</strong>您今天的订单错误。
</div>
</div>
</body>
</html>

Bootstrap 警告框(Alert)插件的更多相关文章

  1. Bootstrap历练实例：警告框(Alert)插件事件

    事件 下表列出了警告框(Alert)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 close.bs.alert 当调用 close 实例方法时立即触发该事件. $('#myal ...

  2. Bootstrap历练实例：警告框(Alert)插件的方法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. amazeui学习笔记--js插件（UI增强）--警告框Alert

    amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...

  4. Bootstrap警告框

    前面的话 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...

  5. Bootstrap的js插件之警告框(alert.js)

    data-dismiss="alert"--为关闭button加入该属性能够使其自己主动为警告框赋予关闭功能. .fade .in--为警告框在关闭时加入动画效果. 很多其它细节參 ...

  6. Bootstrap 警告框（Alert）插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. bootstrap 警告框多个删除

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. bootstrap 警告框单个删除

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. bootstrap警告框、进度条和列表组

    警告框   <div class="container">      <div class="alert alert-success" rol ...

随机推荐

  1. 学习Vim的四周计划

    来源:Python程序员 ID:pythonbuluo vim具有自定义配色方案,语法高亮,linting和自动填充功能 Vim是一个以非常难学而闻名的命令行文本编辑器(有个关于Vim的笑话:问如何生 ...

  2. 手写的select 下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和 ...

  3. web应用,http协议简介,web框架

    一.web应用 web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式C/S.B/S.C/S是客户端 ...

  4. BigDecimal默认用四舍五入方式

    import java.math.BigDecimal; target.setWeight(source.getWeight().setScale(3, BigDecimal.ROUND_HALF_U ...

  5. 根据不同环境配置pom

    clean install clean package -P jt808_dev clean package -P tanway_test -X gps-parent <?xml version ...

  6. (转)linux 系统下虚拟用户的作用

    原文:http://blog.csdn.net/luoshao20120430/article/details/16900653            http://blog.csdn.net/u01 ...

  7. 几种复杂度的斐波那契数列的Java实现

    一:斐波那契数列问题的起源 13世纪初期,意大利数论家Leonardo Fibonacci在他的著作Liber Abaci中提出了兔子的繁殖问题: 如果一开始有一对刚出生的兔子,兔子的长大需要一个月, ...

  8. PHP的Undefined variable错误怎么解决？

    在调试程序时,有可能会出现Undefined variable错误,一般情况下php是不需要定义变量的,但如果服务器什么都报错的,就会出现错误,我们经常接收表单POST过来的数据时报Undefined ...

  9. angularjs $state.go页面不刷新数据

    假如进入market/beian/add添加数据,保存提交后回退market/beian列表页,没有自动更新数据,必须得手动下拉刷新才会出来 $state.go("marketBeian&q ...

  10. SQL Server收缩数据库

    USE[master]GOALTER DATABASE CCPG_SFY SET RECOVERY SIMPLE WITH NO_WAITGOALTER DATABASE CCPG_SFY SET R ...