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 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
python映射列表实例分析
2015/01/26 Python
Python二分法搜索算法实例分析
2015/05/11 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
高三教师工作总结2015
2015/07/21 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
python基础学习之递归函数知识总结
2021/05/26 Python