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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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
德生PL660的电路分析和打磨
2021/03/02 无线电
1.PHP简介
2006/10/09 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
python中字符串前面加r的作用
2015/06/04 Python
python 简单的多线程链接实现代码
2016/08/28 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
高一政治教学反思
2014/01/28 职场文书
志愿者服务感言
2014/02/27 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书