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 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
jquery中event对象属性与方法小结
2013/12/18 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
python函数的5种参数详解
2017/02/24 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python学习基础之循环import及import过程
2018/04/22 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python实现验证码识别
2020/06/15 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
党员公开承诺事项
2014/03/25 职场文书
出国留学经济担保书
2014/04/01 职场文书
出生证明公证书
2014/04/09 职场文书
团代会宣传工作方案
2014/05/08 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
员工工作表扬信
2015/05/05 职场文书
钢琴师观后感
2015/06/12 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
win10下go mod配置方式
2021/04/25 Golang
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers