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

2024-04-06 10:14:51

和前面的模态对话框类似。

0x01 例子

先看一个简单的例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>警告框</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>警告框</h1>
 </div>
 <div class="alert alert-danger fade in ">
 警告！服务器dang了
 <a href="#" class="close" data-dismiss="alert">×</a>
 </div>
</div>
</body>
</html>

效果如下：

0x02 事件

Alert警告框和模态对话框类似，也支持JS事件：

（1）close.bs.alert

当调用 close 实例方法时立即触发该事件：

$('#myalert').bind('close.bs.alert', function () {
 // 执行一些动作...
})

（2）closed.bs.alert

当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）：

$('#myalert').bind('closed.bs.alert', function () {
 // 执行一些动作...
})

看一个例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>警告框</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>警告框</h1>
 </div>
 <div class="alert alert-danger fade in" id="myAlert">
 警告！服务器dang了
 <a href="#" class="close" data-dismiss="alert">×</a>
 </div>
</div>
<script>
 $(function () {
 $("#myAlert").bind('closed.bs.alert',function () {
  alert("警告消息框被关闭！");
 });
 })
</script>
</body>
</html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

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警告框（Alert）插件使用方法

有以下两种方式启用警告框的可取消(dismissal)功能: 1.通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss="alert",就会自动为警告框添加关闭功能. <a class="close" data-dismiss="alert" href="#" rel="external nofollow" rel="ext
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)消息大多是用来想终端用户显示诸如警告或确认消息的信息.使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能. 如果您想要单独引用该插件的功能,那么您需要引用 alert.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法您可以有以下两种方式启用警告框的可取消(dismissal)功能: 1.通过 data 属性:通过数据 API(Dat
bootstrap警告框使用方法解析

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

Tooltip采用的是hover方式弹出提示框(参见前一篇:Bootstrap学习总结笔记(18)– 基本插件之Tooltip提示工具),适合提示内容比较少的情况,要是内容较多,就可以应用Popover提示框. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" cont
Bootstrap基本插件学习笔记之模态对话框(16)

Bootstrap自带了很多JQuery插件,给用户做前端开发提供了很大的方便.对于每一个插件,有2种引用方式:一是单独引用,即使用Bootstrap的单独*.js文件,这种方式需要注意的是一些插件和CSS组件可能依赖其他插件,所以单独引用的时候,需要弄清楚这种包含关系一并引用:二是直接引用完整的bootstrap.js或者压缩版的bootstrap.min.js,需要注意的是不能同时引用这2个文件. Bootstrap自带了很多基本的插件,包括模态对话框.标签切换.Tooltip提示工具等.首
Bootstrap基本插件学习笔记之轮播幻灯片(23)

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式. 0x01 基本实例 Bootstrap实现轮播幻灯片的效果,只需要简单地使用class开发就可以了: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
Bootstrap基本插件学习笔记之按钮(21)

前面已经介绍过Button的使用.通过button按钮,我们还能实现一些诸如按钮状态控制等形式的交互. 0x01 加载状态添加data-loading-text="Loading-"属性: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" cont
Bootstrap基本插件学习笔记之Tooltip提示工具(18)

提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(Tooltip)放在它们的触发元素后面. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1&
Bootstrap基本插件学习笔记之折叠(22)

折叠(Collapse)插件可以很容易地让页面区域折叠起来. 0x01 例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link hr
Bootstrap基本插件学习笔记之标签切换(17)

Bootstrap可以很轻松就实现标签切换的效果. 0x01 样式1 基本样式: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link
Bootstrap源码学习笔记之bootstrap进度条

基本样式要实现进度条效果要使用两个容器,外容器使用"progress"样式,子容器使用"progress-bar"样式.例如: <div class="progress"> <div class="progress-bar" style="width:40%"></div> </div> progress样式主要设置进度条容器的背景色,容器高度.间距等,pr
iOS开发中使用UIWebView 屏蔽 alert警告框

如果是网页内容里面的alert,我们可以等网页加载完毕,也就是在webViewDidFinishLoad中执行下面的js代码,就可以屏蔽alert了 [myWebView stringByEvaluatingJavaScriptFromString:@"window.alert=null;"]; 但上面的方法对于网页onLoad事件里面的alert就不起作用了解决方法就是给UIWebView添加一个类别: 给工程添加JavaScriptAlert.h @interface UIWeb

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

相关推荐

随机推荐