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

用法

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

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. Linux调优（网络）

    定义socket接受缓冲大小 net.core.rmem_default = N #接受 net.core.rmem_max = N net.core.wmem_default = N #发送 net ...

  2. Dell 笔记本触摸板网页双指滑动黑屏

    # 问题如题 # 解决方法: -- 在网上搜了解决方法,最靠谱的一个是说,开机进BIOS,然后什么都不修改退出,重启就能解决(但是我采用这种方法并没有解决) -- 我自己的解决方法:设备管理器里面卸载 ...

  3. (转)CentOS最大文件描述符限制更改

    CentOS最大文件描述符限制更改 原文:https://www.cnblogs.com/TonyXiaoClub/p/4747736.html 系统级的限制:/proc/sys/fs/file-ma ...

  4. 如何在Eclipse中正确安装Jetty插件并初步使用（图文详解）

    不多说,直接上干货! 最近在做一个Storm项目,需要用到Jetty来进行展示.它类似于Tomcat. 一.eclipse中jetty插件安装 打开eclipse,依次点击菜单Help->Ecl ...

  5. SpringBoot项目实现文件上传和邮件发送

    前言 本篇文章主要介绍的是SpringBoot项目实现文件上传和邮件发送的功能. SpringBoot 文件上传 说明:如果想直接获取工程那么可以直接跳到底部,通过链接下载工程代码. 开发准备 环境要 ...

  6. phpcms Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE错误

    我在phpcms的模板中自定义了一个变量,变量的值是通过pc标签赋予的. <?php $url="{$v[url]}"; ?> 结果报如上错误. 实际上应把PHP语句改 ...

  7. Python3基础（5）常用模块：time、datetime、random、os、sys、shutil、shelve、xml处理、ConfigParser、hashlib、re

    ---------------个人学习笔记--------------- ----------------本文作者吴疆-------------- ------点击此处链接至博客园原文------ 1 ...

  8. Git远程推送文件太大的error解决

    error: RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errfno 10054 方法1: 改成ssh推送 方法2: 把推送的缓 ...

  9. qrcode.js的识别解析二维码图片和生成二维码图片

    qrcode只通过前端就能生成二维码和解析二维码图片, 首先要引入文件qrcode.js,下载地址为:http://static.runoob.com/download/qrcodejs-04f46c ...

  10. websocket的加密和解密

    补充个小知识点:按位与运算 按位与运算是同位都为1才为1,有一个不为1就是0 websocket_hand import socket, base64, hashlib import websocke ...