Bootstrap警告
警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。
警告(Alerts)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width = device-width,initial-scale = 1.0"><link rel="stylesheet" href="bootstrap.min.css"><script src = "js/jquery-1.11.2.min.js"></script><script src = "js/bootstrap.min.js"></script><title>CSSDemo</title>
</head>
<body><div class="container"><div class="col-lg-3"><div class="alert alert-success">成功信息。</div><div class="alert alert-info">提示信息。</div><div class="alert alert-warning">警告信息。
</div> <div class="alert alert-danger">错误信息。</div> </div> </div> </body> </html>
可取消的警告(Dismissal Alerts)
创建一个可取消的警告(Dismissal Alert)过程例如以下:
- 通过创建一个 <div>。并向其加入一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之中的一个,来加入一个主要的警告框。
- 同一时候向上面的 <div> class 加入可选的 .alert-dismissable。
- 加入一个关闭button。
<body><div class="container"><div class="col-lg-3"><div class="alert alert-success alert-dismissable">成功信息。
<button type="button" class="close" data-dismiss = "alert" aria-hidden="false">×</button> </div> <div class="alert alert-info">提示信息。 <button type="button" class="close" data-dismiss = "alert" aria-hidden="true">×</button> </div> <div class="alert alert-warning">警告信息。</div> <div class="alert alert-danger">错误信息。
</div> </div> </div> </body>
警告(Alerts)中的链接
<body><div class="container"><div class="col-lg-3"><div class="alert alert-success alert-dismissable"><a href="#" class="alert-link">成功信息。</a><button type="button" class="close" data-dismiss = "alert" aria-hidden="false">×</button></div><div class="alert alert-info"><a href="#" class="alert-link">提示信息。</a><button type="button" class="close" data-dismiss = "alert" aria-hidden="true">×</button></div><div class="alert alert-warning"><a href="#" class="alert-link">警告信息。
</a> </div> <div class="alert alert-danger"> <a href="#" class="alert-link">错误信息。</a> </div> </div> </div> </body>
.alert .alert-link的font-weight:700,因此能够看出字体有加粗
转载于:https://www.cnblogs.com/gavanwanggw/p/7088779.html
Bootstrap警告相关推荐
- Bootstrap警告框
前面的话 在网站中,网页总是需要和用户一起做沟通与交流.特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功.操作错误.提示或者警告等.在Bootstrap框架有一个独立的组件,实 ...
- Bootstrap警告框、弹出提示层、模态框的js插件效果总结
Bootstrap警告框js插件 经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...
- Bootstrap 警告框插件Alert 的事件
事件 Bootstrap警告框插件Alert有两个事件,一个是close,一个是closed,它们的含义见表 5‑6. 表 5‑6 警告框的事件及含义 事件 含义 close 调用close方法时,立 ...
- Bootstrap 警告框插件Alert
警告框 Bootstrap警告框插件Alert需要 bootstrap-alert.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-alert.js 文件. 使用方法 ...
- Bootstrap 警告框的外观
警告框的外观 Bootstrap还提供了 3 个可选的情景类 .alert-error..alert-success 和 .alert-info,用于改变警告框和警告块的背景颜色,以及警告框和警告块中 ...
- Bootstrap 警告块
警告块 如果警告框中包含多行文本,可以追加一个 .alert-block 类,来增加警告框的上下内边距,让多行文本看起来更舒服.如: <div class="alert alert-b ...
- Bootstrap 警告框
警告框 在交互式网页中,经常要根据用户操作的上下文,比如操作成功.操作失败等,为用户提供灵活的提示信息. 警告框 警告框用于为成功.警告和错误信息提供样式.默认的警示框可以通过给 <div> ...
- Bootstrap 警告
原文请见 Bootstrap 警告 警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮. 您可以通过创建一个 &l ...
- 3.15 Bootstrap 警告(Alerts)
文章目录 Bootstrap 警告(Alerts) 可取消的警告(Dismissal Alerts) 警告(Alerts)中的链接 Bootstrap 警告(Alerts) 本章将讲解警告(Alert ...
- Bootstrap 警告框(Alert)插件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
最新文章
- MyBatis学习--简单的增删改查
- 清空SQL Server数据库中所有表数据的方法(转)
- [VS2005]一个简单的CodeSnippet —— 生成类的构造函数。
- java.lang.NoSuchFieldError: EMPTY_ORDERED_ITERATOR起因及解决办法
- 疯传短视频V7.10小程序源码
- VS-001-概述-003-系统架构及业务流程--004-常见问题定位思路
- kafka基础之介绍和分布式集群搭建
- Spring Cloud入门一 Eureka Server
- C# 、.NET、ASP.NET MVC积累
- [译]C语言实现一个简易的Hash table(2)
- 数据库文件导入SQL数据库
- bex5 3.7版本
- Kail linux中无法定位软件包
- 基于java的出租车预约网站
- RS-485 工作逻辑
- 大数据命令,一文在手,全部都有(送纯净版文档)
- forwardRef的使用
- 无法与域“xxxx.com”的Active Directory域控制器(AD DC)连接 之DNS故障
- Javascript中click与blur事件的顺序详析
- 系统中的obj文件、dll文件、so文件、lib文件、exe文件、vcproj文件、sln文件
热门文章
- AndroidStudio 编译中遇到问题总结
- tensorflow超参数优化_超参数优化
- sentinel 整合dubbo限流
- 应用服务器性能优化总结
- 背景建模--模型更新
- 人工智能“军备竞赛”,为什么说搜狗已占据先手优势?
- 【requests:动态网页爬取】慕课评价
- 20135201李辰希20135219洪韶武——信息安全系统设计基础实验报告
- 插入数据提示:1366 - Incorrect string value: ‘lxE7\x8F\xAD’ for column ‘des‘ at row 1
- 完美国际服务器维护中,完美国际官网更新公告