bootstrap警告框示例代码分享

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap缩略图与警告框学习使用

    Bootstrap缩略图与警告框学习使用

    本文实例为大家分享了Bootstrap缩略图与警告框的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

  • Bootstrap基本插件学习笔记之Alert警告框(20)

    Bootstrap基本插件学习笔记之Alert警告框(20)

    和前面的模态对话框类似. 0x01 例子 先看一个简单的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=&quo

  • Bootstrap笔记之缩略图、警告框实例详解

    Bootstrap笔记之缩略图、警告框实例详解

     1. 基础缩略图 给a标签添加类class="thumbnail"如下: <div class="row"> <div class="col-md-3 col-sm-6"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow"

  • bootstrap警告框使用方法解析

    bootstrap警告框使用方法解析

    警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息.使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能. 警告框(Alert) 样式文件: LESS版本:源文件 alerts.less 警告框–结构与样式 <div class="alert alert-success" role="alert"> <button class="close" data-dismiss=&q

  • Bootstrap每天必学之警告框插件

    Bootstrap每天必学之警告框插件

    警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息.使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能. 如果您想要单独引用该插件的功能,那么您需要引用 alert.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以有以下两种方式启用警告框的可取消(dismissal)功能: 1.通过 data 属性:通过数据 API(Dat

  • Bootstrap警告框（Alert）插件使用方法

    Bootstrap警告框（Alert）插件使用方法

    有以下两种方式启用警告框的可取消(dismissal)功能: 1.通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss="alert",就会自动为警告框添加关闭功能. <a class="close" data-dismiss="alert" href="#" rel="external nofollow" rel="ext

  • bootstrap警告框示例代码分享

    本文实例为大家分享了bootstrap警告框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

  • bootstrap模态框示例代码分享

    本文实例为大家分享了bootstrap模态框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

  • bootstrap手风琴折叠示例代码分享

    本文实例为大家分享了bootstrap手风琴的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view

  • bootstrap表单示例代码分享

    本文实例为大家分享了bootstrap表单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp

  • bootstrap栅格系统示例代码分享

    本文实例为大家分享了bootstrap栅格系统的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie

  • jQuery点击弹出层弹出模态框点击模态框消失代码分享

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>jQuery弹出层 模态框</title> <script src="./jquery.min.js" type="text/javascript"></script> <style> .btn{ height:100px; } .black_o

  • bootstrap模态框远程示例代码分享

    本文实例为大家分享了bootstrap模态框远程的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

  • js右下角弹出提示框示例代码

    js右下角弹出提示框示例代码

    本文实例讲解了网页右下角弹出广告信息框实例代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>网页右下角的信息框</title> </head> <style type="text/css"> #winpop { width:200px;

随机推荐