Bootstrap警告(Alerts)的实现方法


Posted in Javascript onMarch 22, 2017

Bootstrap 所提供的用于警告的 class,可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。
html代码

<div class="alert alert-success"> 
  成功!很好地完成了提交。 
</div> 
<div class="alert alert-info"> 
  信息!请注意这个信息。 
</div>

如果要创建一个可取消的警告(Dismissal Alert)步骤如下:

1、通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。

2、同时向上面的 <div> class 添加可选的 .alert-dismissable。

3、添加一个关闭按钮。(按钮可点击关掉)

html代码

<div class="alert alert-warning alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
          警告!请不要提交。 
  </div>  
<div class="alert alert-danger alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
           错误!请进行一些更改。 
  </div>

注意:请确保使用带有 data-dismiss="alert" data 属性的 <button> 元素。

html代码

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bootstrap 页面标题(Page Header)</title> 
  <meta charset="utf-8"> 
  <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
 
</head> 
 
<body> 
<div class="container"> 
  <div class="alert alert-success"> 
            成功!很好地完成了提交。 
  </div> 
  <div class="alert alert-info"> 
       信息!请注意这个信息。 
  </div>  
  <div class="alert alert-warning alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
          警告!请不要提交。 
  </div>  
  <div class="alert alert-danger alert-dismissable"> 
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> 
           错误!请进行一些更改。 
  </div> 
   
</div>  
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
  </body> 
</html>

效果图:

Bootstrap警告(Alerts)的实现方法

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

Javascript 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
JavaScript生成简单等差数列
Nov 28 Javascript
微信小程序实现录音功能
Nov 22 Javascript
bootstrap IE8 兼容性处理
Mar 22 #Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 #Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 #Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 #Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 #Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 #Javascript
You might like
PHP memcache扩展的三种安装方法
2009/04/26 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
php导出excel格式数据问题
2014/03/11 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
vue的for循环使用方法
2019/02/12 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
美国创意之家:BulbHead
2017/07/12 全球购物
ORACLE第二个十问
2013/12/14 面试题
某公司面试题
2012/03/05 面试题
学生党员思想汇报
2013/12/28 职场文书
求职信格式要求
2014/05/23 职场文书
社区禁毒工作方案
2014/06/02 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
学期个人自我总结
2015/02/13 职场文书
索赔员岗位职责
2015/02/15 职场文书
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers