文档章节

Bootstrap中的警示框

9
 9秒教育
发布于 2015/12/02 09:23
字数 1326
阅读 74
收藏 3
点赞 0
评论 0

警示框

在网站中,网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功、操作错误、提示或者警告等。如下图所示:

在Bootstrap框架有一个独立的组件,实现上述的效果,这个组件被称为警示框。

源码版本:

☑ LESS版本:对应的源码文件alerts.less

☑ Sass版本:对应的源码文件_alerts.scss

☑ 编译后的版本:bootstrap.css文件第4427行~第4499行

警示框--默认警示框

Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下,提供了四种不同的警示框效果:

  1、成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色;

  2、信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色;

  3、警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色;

  4、错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,具体呈现的是背景、边框和文本都是浅红色。

使用方法:

具体使用的时候,可以在类名为“alert”的div容器里放置提示信息。实现不同类型警示框,只需要在“alert”基础上追加对应的类名,如下:

<div class="alert alert-success" role="alert">恭喜您操作成功!</div> <div class="alert alert-info" role="alert">请输入正确的密码</div> <div class="alert alert-warning" role="alert">您已操作失败两次,还有最后一次机会</div> <div class="alert alert-danger" role="alert">对不起,您输入的密码有误</div>

实现原理:

其中“alert”样式的源码主要是设置了警示框的背景色、边框、圆角和文字颜色。另外对其内部几个元素h4、p、ul和“.alert-link”做了样式上的特殊处理:

/*bootstrap.css文件第4427行~第4446行*/ .alert {   padding: 15px;   margin-bottom: 20px;   border: 1px solid transparent;   border-radius: 4px; } .alert h4 {   margin-top: 0;   color: inherit; } .alert .alert-link {   font-weight: bold; } .alert > p, .alert > ul {   margin-bottom: 0; } .alert > p + p {   margin-top: 5px; }

不同类型的警示框,主要是通过“alert-success”、“alert-info”、“alert-warning”和“alert-danger”样式来实现:

/*bootstrap.css文件第4456行~第4499行*/ .alert-success {   color: #3c763d;   background-color: #dff0d8;   border-color: #d6e9c6; } .alert-success hr {   border-top-color: #c9e2b3; } .alert-success .alert-link {   color: #2b542c; } .alert-info {   color: #31708f;   background-color: #d9edf7;   border-color: #bce8f1; } .alert-info hr {   border-top-color: #a6e1ec; } .alert-info .alert-link {   color: #245269; } .alert-warning {   color: #8a6d3b;   background-color: #fcf8e3;   border-color: #faebcc; } .alert-warning hr {   border-top-color: #f7e1b5; } .alert-warning .alert-link {   color: #66512c; } .alert-danger {   color: #a94442;   background-color: #f2dede;   border-color: #ebccd1; } .alert-danger hr {   border-top-color: #e4b9c0; } .alert-danger .alert-link {   color: #843534; }

警示框--可关闭的警示框

大家在平时浏览网页的时候,会发现一些警示框带有关闭按钮,用户一点击关闭按钮就能自动关闭显示的警示框(也就是让警示框隐藏不显示)。在Bootstrap框架中的警示框也具有这样的功能。

使用方法:

只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤:

1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

2、在button标签中加入class="close"类,实现警示框关闭按钮的样式。

3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss="alert"”(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)。

具体使用如下:

<div class="alert alert-success alert-dismissable" role="alert">     <button class="close" type="button" data-dismiss="alert">&times;</button>     恭喜您操作成功! </div>

运行效果如下:

5555

 

原理分析:

在样式上,需要在基本警示框“alert”的基础上添加“alert-dismissable”样式,这样就可以实现带关闭功能的警示框。

/*bootstrap.css文件第4447行~第4455行*/ .alert-dismissable {   padding-right: 35px; } .alert-dismissable .close {   position: relative;   top: -2px;   right: -21px;   color: inherit; }

警示框--警示框的链接

有时候你可能想在警示框中加入链接地址,用来告诉用户跳到某一个地方或新的页面。而这个时候你又想让用户能明显的看出来这是链接地址。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理,并且颜色相应加深。

实现方法:

Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示。

具体使用如下:

<div class="alert alert-success" role="alert">     <strong>Well done!</strong>      You successfully read      <a href="#" class="alert-link">this important alert message</a>     . </div> <div class="alert alert-info" role="alert">     <strong>Heads up!</strong>      This       <a href="#" class="alert-link">alert needs your attention</a>      , but it's not super important. </div> <div class="alert alert-warning" role="alert">     <strong>Warning!</strong>      Better check yourself, you're       <a href="#" class="alert-link">not looking too good</a>      . </div> <div class="alert alert-danger" role="alert">     <strong>Oh snap!</strong>     <a href="#" class="alert-link">Change a few things up</a>      and try submitting again. </div>

实现原理:

实现样式如下:

/*bootstrap.css文件第4437行~第4439行*/ .alert .alert-link {   font-weight: bold; } /*不同类型警示框中链接的文本颜色*/ .alert-success .alert-link {   color: #2b542c; } .alert-info .alert-link {   color: #245269; } .alert-warning .alert-link {   color: #66512c; } .alert-danger .alert-link {   color: #843534; }


© 著作权归作者所有

共有 人打赏支持
9
粉丝 2
博文 24
码字总数 32297
作品 0
东城
转:Bootstrap3.0教程

第一部分:Bootstrap介绍 1.Bootstrap学习从现在开始 http://www.cnblogs.com/aehyok/p/3381651.html 2.Bootstrap3.0学习第一轮(入门) http://www.cnblogs.com/aehyok/p/3398359.html 第二部......

子弹兄 ⋅ 2014/08/22 ⋅ 2

Bootstrap3.0教程

第一部分:Bootstrap介绍 1.Bootstrap学习从现在开始 http://www.cnblogs.com/aehyok/p/3381651.html 2.Bootstrap3.0学习第一轮(入门) http://www.cnblogs.com/aehyok/p/3398359.html 第二部......

zhangsirsdo ⋅ 2014/08/20 ⋅ 4

创建CSS3警示框渐变动画

来源:GBin1.com 在线演示 在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的。由于默认的JavaScript警示框往往设计不佳和过于侵...

gbin1 ⋅ 2013/08/27 ⋅ 0

iOS8统一的系统提示控件——UIAlertController

iOS8统一的系统提示控件——UIAlertController 一、引言 相信在iOS开发中,大家对UIAlertView和UIActionSheet一定不陌生,这两个控件在UI设计中发挥了很大的作用。然而如果你用过,你会发现这...

珲少 ⋅ 2015/10/17 ⋅ 2

您的系统里有 1 个(依赖关系)毁损的软件包!

“您的系统里有 1 个(依赖关系)毁损的软件包! 请使用“Broken”过滤器定位它们“。虽然不影响使用,但是升级的时候提示,上方的任务栏上也有个红色的警示, 解决方法:先进入” 新立得软件包...

雨焰 ⋅ 2013/06/21 ⋅ 0

幸运大转盘

一.搭建框架 1. 设置整个view的背景图片 @“LuckyBackground” 有三种设置方式 1>拖一个imageView到控制器中 给imageView设置图片 2>设置view的背景颜色 用到方法 self.view.backgroundColo...

马尔代夫的沙滩 ⋅ 2016/04/04 ⋅ 0

bootstrap3教程

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...

harries ⋅ 2015/09/24 ⋅ 0

VM虚拟机内存报警和vRealize Operations Manager 6.5部署

  生产环境一直使用vCenter管理host主机,因规模小没上vcops。从升级vcenter6.5后个别VM总是莫名其妙的报内存使用率过高的问题,而实际内存使用并不高,资源也够用。vcenter本身没有很好的...

lorysun ⋅ 2017/05/04 ⋅ 0

UIAlertView和ActionSheet抛弃后的,使用UIAlertController代替

你知道 、 (以及它们各自的 delegate protocols) 在 iOS 8 中已经被废弃了吗? 这是真的。在你的代码中按住 ⌘ 点击 或者 ,你就会看到最上面的注释: is deprecated. Use with a of instead...

issac宝华 ⋅ 2016/08/30 ⋅ 0

bootstrap模态弹出框

模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js。 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件。 样式代码: ☑ LE...

老胡不胖 ⋅ 2015/11/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

浅谈springboot Web模式下的线程安全问题

我们在@RestController下,一般都是@AutoWired一些Service,由于这些Service都是单例,所以并不存在线程安全问题。 由于Controller本身是单例模式 (非线程安全的), 这意味着每个request过来,...

算法之名 ⋅ 今天 ⋅ 0

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部