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下IE与FF兼容函数收集
Sep 17 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
浅谈js的异步执行
Oct 18 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 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&amp;java(二)
2006/10/09 PHP
flash用php连接数据库的代码
2011/04/21 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Python logging设置和logger解析
2019/08/28 Python
Python urllib2运行过程原理解析
2020/06/04 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
高一家长会邀请函
2014/01/12 职场文书
绿化工程实施方案
2014/03/17 职场文书
大学社团计划书
2014/05/01 职场文书
2014年材料员工作总结
2014/11/19 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
个人售房合同协议书
2016/03/21 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python