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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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
SONY ICF-F10中波修复记
2021/03/02 无线电
php 强制下载文件实现代码
2013/10/28 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
Javascript 强制类型转换函数
2009/05/17 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
npm的lock机制解析
2019/06/20 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
python自动生成证件号的方法示例
2021/01/14 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
应届毕业生简历自我评价
2014/01/31 职场文书
户外活动策划方案
2014/03/12 职场文书
ktv筹备计划书
2014/05/03 职场文书