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脚本defer的作用示例介绍
Jan 02 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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
短波收音机简介
2021/03/01 无线电
PHP的开发框架的现状和展望
2007/03/16 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
php 的反射详解及示例代码
2016/08/25 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python实现高效求解素数代码实例
2015/06/30 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python多线程扫描端口(线程池)
2019/09/04 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
《与象共舞》教学反思
2014/02/24 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
文明好少年事迹材料
2014/08/19 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
答谢词范文
2015/01/05 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis