Bootstrap警告框(Alert)插件使用方法


Posted in Javascript onMarch 21, 2017

有以下两种方式启用警告框的可取消(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>

效果图:

Bootstrap警告框(Alert)插件使用方法

3、下面是一些警告框(Alert)插件中有用的方法:

Bootstrap警告框(Alert)插件使用方法

效果图

Bootstrap警告框(Alert)插件使用方法

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

Bootstrap警告框(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>

效果图:

Bootstrap警告框(Alert)插件使用方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery默认校验规则整理
Mar 24 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 #Javascript
JavaScript数组和对象的复制
Mar 21 #Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 #Javascript
zTree实现节点修改的实时刷新功能
Mar 20 #Javascript
Vue指令的钩子函数使用方法
Mar 20 #Javascript
非常实用的vue导航钩子
Mar 20 #Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 #Javascript
You might like
开启PHP Static 关键字之旅模式
2015/11/13 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
JavaScript实现区块链
2018/03/14 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
教你安装python Django(图文)
2013/11/04 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python3进制之间的转换代码实例
2019/08/24 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
铭立家具面试题
2012/12/06 面试题
门诊手术室工作制度
2014/01/30 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
2014年党课学习材料
2014/05/11 职场文书
拉拉队口号
2014/06/16 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技