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 相关文章推荐
List the Codec Files on a Computer
Jun 18 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
js函数和this用法实例分析
Mar 13 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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中PDO的错误处理
2011/09/04 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
jquery中radio checked问题
2015/03/16 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
python的几种开发工具介绍
2007/03/07 Python
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
python实现基本进制转换的方法
2015/07/11 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
python实现随机漫步方法和原理
2019/06/10 Python
深入理解Python 多线程
2020/06/16 Python
2014年网络管理员工作总结
2014/12/01 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
2015年林业工作总结
2015/05/14 职场文书
运动会通讯稿200字
2015/07/20 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL