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 XML实现两级级联下拉列表
Nov 10 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
在JavaScript中使用timer示例
May 08 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
浅谈javascript错误处理
Aug 11 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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 中的类
2006/10/09 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
Vue函数式组件-你值得拥有
2019/05/09 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
python编程实现希尔排序
2017/04/13 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python pytest进阶之fixture详解
2019/06/27 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
使用Python封装excel操作指南
2021/01/29 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
应届生煤化工求职信
2013/10/21 职场文书
日语系毕业生推荐信
2013/11/11 职场文书
客户经理岗位职责
2015/01/31 职场文书
货款欠条范本
2015/07/03 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
java设计模式--原型模式详解
2021/07/21 Java/Android
JS中如何优雅的使用async await详解
2021/10/05 Javascript
JS实现九宫格拼图游戏
2022/06/28 Javascript