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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
jQuery-Tools-overlay 使用介绍
Jul 14 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
Python列表对象实现原理详解
2019/07/01 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
如何在python中判断变量的类型
2020/07/29 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
python实现学生信息管理系统源码
2021/02/22 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
营销专业应届生求职信
2013/11/26 职场文书
2014年元旦活动方案
2014/02/15 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
护理见习报告范文
2014/11/03 职场文书
单身申明具结书
2015/02/26 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server