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实现下拉框
Nov 24 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
基于slideout.js实现移动端侧边栏滑动特效
2016/11/28 Javascript
JS高级运动实例分析
2016/12/20 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python实现自动上京东抢手机
2018/02/06 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
详解Django的CSRF认证实现
2018/10/09 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
艺术用品:Arteza
2018/11/25 全球购物
几个常见的软件测试问题
2016/09/07 面试题
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
档案工作汇报材料
2014/08/21 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
经理岗位职责
2015/02/02 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android