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

用法

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

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. EOS多主机多节点环境配置

    本文使用了四台同网段的主机,第一台做为eosio创世用户使用,另外三台做为出块者节点使用,最终实现了EOS多主机多节点的配置.最后EOSIO创世用户不再出块,由选举出来的各个节点轮流出块,下面将介绍具 ...

  2. Jmeter 添加CSV Data set config 文件的相对路径及编码在Windows和Linux下的兼容性(转)

    简介: Jmeter实际上是不需要安装的,只需要有ApacheJMeter.jar.启动批处理文件(jmeter.bat或jmeter).配置文件(jmeter.properties.user.pro ...

  3. 基于CentOS系统下的Oracle的安装

    背景 最近的数据库的实验课,要求利用虚拟机安装CentOS系统,并在此系统上安装Oracle_11g软件实现监听,在windows系统上安装SQL Developer软件作为客户端 ,从而可以在SQL ...

  4. 华东交通大学2017年ACM“双基”程序设计竞赛 1010

    Problem Description 定义操作:将数 n 变为 f(n) = floor(sqrt(n)).即对一个数开平方后,再向下取整.如对 2 进行一次操作,开平方再向下取整, 1.41421 ...

  5. 020 Valid Parentheses 有效的括号

    给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效.括号必须以正确的顺序关闭,"()" 和 "()[]{}" 是有效的 ...

  6. 由Python的浅拷贝(shallow copy)和深拷贝(deep copy)引发的思考

    首先查看拷贝模块(copy)发现: >>> help(copy)Help on module copy:NAME    copy - Generic (shallow and dee ...

  7. css 设置table样式

    <style type="text/css" >      table tr td{height:39px; font-size: 13px; line-height: ...

  8. 关于docker下容器和宿主机器时间不一致问题

    在前几天,在阿里云的ECS上部署一个docker应用时,发现部署的应用在请求第三方应用时,一直出现超时的异常提示,刚开始以为是第三方应用系统的问题(此系统无赖躺枪,反正也不是一次两次了,多躺几次也就习 ...

  9. JS文本框输入限制

    1上面的文本框只能输入数字代码(小数点也不能输入): CODE: <input onkeyup="this.value=this.value.replace(/\D/g,'')&quo ...

  10. oracle存储过程jdbc调用

    package com.jckb.procedure; import java.sql.CallableStatement; import java.sql.Connection; import ja ...