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

有以下两种方式启用警告框的可取消（dismissal）功能：

1、通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。

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

2、通过 JavaScript添加可取消功能：

$(".alert").alert()

html代码

<div class="alert alert-success">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert" aria-hidden="true">√</a>
   <strong>成功！</strong>您的网络连接已成功！
  </div>

效果图：

3、下面是一些警告框（Alert）插件中有用的方法：

效果图

4、下表列出了警告框（Alert）插件中要用到的事件。这些事件可在函数中当钩子使用。

html代码

<!DOCTYPE html>
<html>
 <head>
  <title>Bootstrap 警告框（Alert）插件</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style>
   body{
    font-size:24px; 

   }
  </style>
 </head>
 <body>
  <div class="container">
  <h3>警告框（Alert）插件 alert() 方法</h3>
  <div id="myAlert" class="alert alert-warning">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert">×</a>
   <strong>警告！</strong>您的网络连接有问题。
  </div>
  <script type="text/javascript">
   $(function() {
   $("div#myAlert").bind('click',function () {
    alert("警告消息框被关闭。");
    });
   });
  </script>
  </div> 

 </body>
</html>

效果图：

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

赞 (0)

相关推荐

  • 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缩略图与警告框学习使用

    本文实例为大家分享了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警告框的具体代码,供大家参考,具体内容如下 <!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每天必学之警告框插件

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

  • 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模态框调用功能实现方法

    近在做一个项目时需要在页面中嵌入弹出窗口,用来展示表单信息.其实这种弹出窗口有很多jquery插件都可以实现,我这边前端都是用Bootstrap的,正好Bootstrap有模态框这个功能,这下就可以直接拿它实现了. 实现步骤如下: 在前端页面引入bootstrap相关的css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.mi

  • Bootstrap 模态框(Modal)插件代码解析

    Bootstrap 模态框(Modal)插件代码解析

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.下面通过代码给大家介绍bootstrap 模态框插件,先给大家展示下效果图: 页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my

  • Bootstrap 模态框实例插件案例分析

    Bootstrap 模态框实例插件案例分析

    好久没有发过自己的代码的状态了,今天编写代码感觉有力不从心了.不过慢慢的找回了感觉,正好朋友问了我一个问题,就是如何实现模态框.其实就是引用bootstrap插件来实现.下面通过本文给大家介绍下. Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件).页面中的模态框一般分为注册模态框.变更模态框.删除(信息提示

  • Python爬虫之Selenium警告框(弹窗)处理

    JavaScript 有三种弹窗 Alert (只有确定按钮), Confirmation (确定,取消等按钮), Prompt (有输入对话框),而且弹出的窗口是不能通过前端工具对其进行定位的,这个时候就可以通过switch_to.alert方法来定位这个弹窗,并进行一系列的操作. 本章中用到的关键方法如下: switch_to.alert:定位到警告框 text:获取警告框中的文字信息 accept():接受现有警告框(相当于确认) dismiss():解散现有警告框(相当于取消) send

  • JS消息弹框alert、confirm、prompt的实现代码

    alert 消息提示框: 用于警告,只有确定按钮. alert(str); confirm 消息对话框: 通过返回值可以判断用户点击了什么按钮 . confirm(str); 当用户点击"确定"按钮时,返回true.当用户点击"取消"按钮时,返回false. prompt()消息输入框: 弹框中包含一个输入框和确认取消按钮,用户可以在输入框输入内容. var reason = window.prompt("请输入审核不通过理由:", "

随机推荐