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 相关文章推荐
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
javascript实现切换td中的值
Dec 05 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
微信小程序template模板与component组件的区别和使用详解
May 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
第十节--抽象方法和抽象类
2006/11/16 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
JavaScript事件用法浅析
2016/10/31 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
浅析VUE防抖与节流
2020/11/24 Vue.js
python实现读取命令行参数的方法
2015/05/22 Python
Python生成随机数组的方法小结
2017/04/15 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Pytorch转tflite方式
2020/05/25 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
EJB实例的生命周期
2016/10/28 面试题
考试作弊被抓检讨书
2014/01/10 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
师范生见习报告
2014/10/31 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书