Bootstrap每天必学之警告框插件

警告框（Alert）消息大多是用来想终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。

如果您想要单独引用该插件的功能，那么您需要引用 alert.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

一、用法
您可以有以下两种方式启用警告框的可取消（dismissal）功能：
1、通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">
 ×
</a>

2、通过 JavaScript：通过 JavaScript 添加可取消功能：
$(".alert").alert()

二、简单实例

警告框即为点击小时的信息框。
1、基本实例

<div class="alert alert-warning">
 <button class="close" type="button" data-dismiss="alert">
 <span>×</span>
 </button>
 <p>
 警告：您的浏览器不支持！
 </p>
</div>

2、添加淡入淡出效果

<div class="alert alert-warning fade in">
如果用 JavaScript，可以代替 data-dismiss="alert"

//JavaScript 方法

$('.close').on('click', function() {
 $('#alert').alert('close');
})

Alert 插件中事件有两种：

//事件，其他雷同

$('#alert').on('close.bs.alert', function() {
 alert('当 close 方法被触发时调用！');
});

本文系列教程整理到：Bootstrap基础教程 专题中，欢迎点击学习。

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家学习Bootstrap警告框插件有所帮助。

赞 (0)

相关推荐

  • 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警告框（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笔记之缩略图、警告框实例详解

     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警告框的具体代码,供大家参考,具体内容如下 <!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缩略图与警告框学习使用

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

  • 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每天必学之模态框（Modal）插件

    Bootstrap每天必学之模态框（Modal）插件

    本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续 一．基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l

  • Bootstrap每天必学之导航条(二)

    Bootstrap每天必学之导航条(二)

    一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class="nav">)基础上添加类名"navbar-nav" 第二步:在列表外部添加一个容器(div),并且使用类名"navbar"和"navbar-default" <div class="navbar navbar-default"> <!-- 导航条标题--> <

  • Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap每天必学之弹出框（Popover）插件

    Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面. 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 如果您想要单独引用该插件的功能,那么您需要引用 popov

  • Bootstrap每天必学之js插件

    Bootstrap每天必学之js插件

    1.Bootstrap 插件概览 在前面 布局组件 章节中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件.利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况被触发. 2.导入JavaScript插件 Bootstrap除了包含丰富的W

  • Bootstrap每天必学之轮播（Carousel）插件

    Bootstrap每天必学之轮播（Carousel）插件

    Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引用该插件的功能,那么您需要引用 carousel.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.实例 下面是一个简单的幻灯片,使用 Bootstrap 轮播(Carousel)插件显示了一个循环播放元素的通用组件.

  • Bootstrap每天必学之前端开发框架

    Bootstrap每天必学之前端开发框架

    BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢.本文总结了Bootstrap之所以广泛流传的11大原因.如果你还没有使用Twitter Bootstrap,建议你去了解一下.小编也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习. bootstrap深受广大屌丝喜爱的原因到底是什

  • Bootstrap每天必学之缩略图与警示窗

    Bootstrap每天必学之缩略图与警示窗

    1.缩略图 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息.Bootstrap框架将这一部独立成一个模块组件.并通过"thumbnail"样式配合bootstrap的网格系统来实现.可以将产品列表页变得更好看. 源码文件: ☑ LESS版本:对应文件thumbnails.less ☑ Sass版本:对应文件_thumbnails.scss ☑ 编译后版本:bootstrap.css文件第4402行-第4426行 使用方法:

  • PyQt5每天必学之组合框

    PyQt5每天必学之组合框

    QComboBox 是一个允许用户从列表选项中选择一项的控件. #!/usr/bin/python3 # -*- coding: utf-8 -*- """ PyQt5 教程 这个例子展示了如何使用QComboBox部件. 作者:我的世界你曾经来过 博客:http://blog.csdn.net/weiaitaowang 最后编辑:2016年8月4日 """ import sys from PyQt5.QtWidgets import QAppl

随机推荐