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 相关文章推荐
javaScript同意等待代码实现心得
Jan 01 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
node后端服务保活的实现
Nov 10 Javascript
JavaScript常用工具函数大全
May 06 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
微信小程序中做用户登录与登录态维护的实现详解
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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php获取操作系统语言代码
2013/11/04 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
Python自动登录126邮箱的方法
2015/07/10 Python
Python决策树分类算法学习
2017/12/22 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
python实现学员管理系统
2019/02/26 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
护理专业的自荐信
2013/10/22 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书