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

用法

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

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. 线段树 洛谷P3932 浮游大陆的68号岛

    P3932 浮游大陆的68号岛 题目描述 妖精仓库里生活着黄金妖精们,她们过着快乐,却随时准备着迎接死亡的生活. 换用更高尚的说法,是随时准备着为这个无药可救的世界献身. 然而孩子们的生活却总是无忧无 ...

  2. git 处理 crlf rf

    假如你正在 Windows 上写程序,又或者你正在和其他人合作,他们在 Windows 上编程,而你却在其他系统上,在这些情况下,你可能会遇到行尾结束符问题.这是因为 Windows 使用回车和换行两 ...

  3. Luogu P3223 [HNOI2012]排队 组合

    本来做了一道  P4901 排队 后来发现自己做错题了...到也都是数学qwq 这题最恶心的就是两只(雾)老师. 那我们分类讨论: 1.两个老师之间是男生: $ A(n,n)*A(n+1,2)*A(n ...

  4. 自动化测试 - Appium + Python史上最全最简环境搭建步骤

    一,为什么是Appium借一张图: 1.1 Appium优点 l  开源 l  跨架构:NativeApp.Hybird App.Web App l  跨设备:Android.iOS.Firefox ...

  5. PHP根据经纬度计算距离

    思路: 公式: W为纬度对应的弧度,J为经度对应的弧度,如上图所示 下面代码  lat是纬度  lng是经度 /** * 根据经纬度算距离,返回结果单位是公里,先纬度,后经度 * @param $la ...

  6. 035 Search Insert Position 搜索插入位置

    给定一个排序数组和一个目标值,如果在数组中找到目标值则返回索引.如果没有,返回到它将会被按顺序插入的位置.你可以假设在数组中无重复元素.案例 1:输入: [1,3,5,6], 5输出: 2案例 2:输 ...

  7.  $(document).ready(function() { });

    l  $(document).ready(function() {   }); 初始化jsp

  8. mysql通用分页存储过程遇到的问题

    DELIMITER $$ USE `tsb_asksys`$$ DROP PROCEDURE IF EXISTS `P_viewPage`$$ CREATE DEFINER=`root`@`local ...

  9. SSH隧道打洞技巧

    SSH Tunnel有三种,分别是Local模式(ssh -NfL),Remote模式(ssh -NfR),Dynamic模式(ssh -NfD). 基本参数说明: -N 不执行任何命令 -f 在背景 ...

  10. centos执行apt-get提示不存在

    在centos下用yum install xxx yum和apt-get的区别 一般来说著名的linux系统基本上分两大类: 1.RedHat系列:Redhat.Centos.Fedora等 2.De ...