bootstrap警告框示例代码分享


Posted in Javascript onMay 17, 2017

本文实例为大家分享了bootstrap警告框的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 

<html lang="zh-CN"> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 <title>XXX</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" > 
 <link rel="stylesheet" href="css/main.css" rel="external nofollow" > 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body> 
 
<div class="alert alert-danger fade in"><!--淡入淡出--> 
 <button type="button" class="close" data-dismiss="alert"> 
  <span>×</span> 
 </button> 
 <p> 
  警告:你的浏览器不支持 
 </p> 
</div> 
<br> 
<br> 
<br> 
<!--用jQuery代替data-dismiss="alert"--> 
<div class="alert alert-danger fade in" id="alert"><!--淡入淡出--> 
 <button type="button" class="close"> 
  <span>×</span> 
 </button> 
 <p> 
  警告:你的浏览器不支持 
 </p> 
</div> 
 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
<script> 
 $('.close').on('click', function () { 
  $('#alert').alert('close'); 
 }) 
 
 
 //事件,其他雷同 
 $('#alert').on('close.bs.alert', function () { 
  alert('当 close 方法被触发时调用!'); 
 }); 
</script> 
</body> 
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
Vue通过input筛选数据
Oct 26 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 #Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 #Javascript
原生JS实现层叠轮播图
May 17 #Javascript
JavaScript手风琴页面制作
May 17 #Javascript
jQuery查找dom的几种方法效率详解
May 17 #jQuery
bootstrap的工具提示实例代码
May 17 #Javascript
js字符串与Unicode编码互相转换
May 17 #Javascript
You might like
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
PHP经典面试题集锦
2015/03/19 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
React 组件间的通信示例
2018/06/14 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
jQuery无冲突模式详解
2019/01/17 jQuery
node.js express框架简介与实现
2019/07/23 Javascript
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python递归函数实例讲解
2019/02/27 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Python2与Python3的区别点整理
2019/12/12 Python
Python定义函数实现累计求和操作
2020/05/03 Python
python的pip有什么用
2020/06/17 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
金讯Java笔试题目
2013/06/18 面试题
什么是.net
2015/08/03 面试题
STP的判定过程
2012/10/01 面试题
教师实习自我鉴定
2013/12/13 职场文书
小学毕业家长寄语
2014/01/19 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
今日说法观后感
2015/06/08 职场文书
医院感染管理制度
2015/08/05 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers