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 相关文章推荐
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 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
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
ppk谈JavaScript style属性
2008/10/10 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
详解python运行三种方式
2019/05/13 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
热爱祖国的演讲稿
2014/05/04 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
水电工程师岗位职责
2015/02/13 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android