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的动态创建表格的插件
Apr 05 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
原生js的数组除重复简单实例
May 24 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
javascript实现超好看的3D烟花特效
Jan 01 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数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
上班迟到检讨书
2014/01/10 职场文书
企业趣味活动方案
2014/08/21 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
党员剖析材料范文
2014/12/18 职场文书
先进集体申报材料
2014/12/25 职场文书
奖学金个人总结
2015/03/04 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python