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 相关文章推荐
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python3 线性回归验证方法
2019/07/09 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
PyTorch预训练的实现
2019/09/18 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
经营理念标语
2014/06/21 职场文书
先进事迹演讲稿
2014/09/01 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
预备党员转正材料
2014/12/19 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
辩论赛新闻稿
2015/07/17 职场文书
2015年中秋寄语
2015/07/31 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL