bootstrap警告框使用方法解析


Posted in Javascript onJanuary 13, 2017

警告框(Alert)消息大多是用来想终端用户显示诸如警告或确认消息的信息。使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能。

警告框(Alert)

样式文件:
LESS版本:源文件 alerts.less

警告框?结构与样式

<div class="alert alert-success" role="alert">
 <button class="close" data-dismiss="alert" type="button" >×</button>
 <p>恭喜您操作成功!</p>
</div>

警告框?使用声明式触发警告框

击X会关闭整个警告框。
其实关闭按钮,不一定非要用X号,也可以是普通的按钮元素或者链接元素,只需要保证关闭元素带有自定义属性data-dismiss=”alert”即可。

bootstrap警告框使用方法解析

<h3>使用a标签作为关闭按钮</h3>
<div class="alert alert-warning" role="alert">
 <h4>谨防被骗</h4>
 <p>请确认您转账的信息是你的亲朋好友,不要轻意相信不认识的人...</p>
 <a href="#" class="btn btn-danger" data-dismiss="alert">关闭</a>
</div>

警告框?JavaScript触发警告框

通过自定义data-dismiss=”alert”属性来触发警告框关闭之外,还可以通过JavaScript方法。只需要在关闭按钮上绑定一个事件

<div class="alert alert-warning" role="alert" id="myAlert">
 <h4>谨防被骗</h4>
 <p>请确认您转账的信息是你的亲朋好友,不要轻意相信不认识的人...</p>
 <button type="button" class="btnbtn-danger" id="close">关闭</button>
</div>
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

 <script>
 $(function(){
 $("#close").on("click",function(){
 $(this).alert("close");
 });
 });
 </script>

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

Javascript 相关文章推荐
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
JS中Attr的用法详解
Oct 09 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 #Javascript
js实现文字向上轮播功能
Jan 13 #Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 #Javascript
js实现交通灯效果
Jan 13 #Javascript
微信小程序 简单教程实例详解
Jan 13 #Javascript
javascript构造函数以及原型对象的理解
Jan 13 #Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 #Javascript
You might like
php win下Socket方式发邮件类
2009/08/21 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
Yii2中datetime类的使用
2016/12/17 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
python计算最大优先级队列实例
2013/12/18 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
python中实现词云图的示例
2020/12/19 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
医院护士的求职信范文
2013/12/26 职场文书
中学校庆方案
2014/03/17 职场文书
综合内勤岗位职责
2014/04/14 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
五好家庭申报材料
2014/12/20 职场文书
务虚会发言材料
2014/12/25 职场文书
趣味运动会通讯稿
2015/07/18 职场文书