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 相关文章推荐
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
JS中常用的消息框总结
Feb 24 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
DTD的含义以及作用
2014/01/26 面试题
小学生防溺水广播稿
2014/01/12 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
体育专业求职信
2014/07/16 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
2014年检验员工作总结
2014/11/19 职场文书
写给领导的感谢信
2015/01/22 职场文书
节水宣传标语口号
2015/12/26 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL