Bootstrap警告框

发布时间:2017-7-9 7:13:16编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"Bootstrap警告框 ",主要涉及到Bootstrap警告框 方面的内容,对于Bootstrap警告框 感兴趣的同学可以参考一下。

前面的话

  在网站中,网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框,比如说告诉用户操作成功、操作错误、提示或者警告等。在Bootstrap框架有一个独立的组件,实现类似的效果,这个组件被称为警示框。本文将详细介绍Bootstrap警告框

默认用法

  警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息

  将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框,.alert 类是必须要设置的,另外还提供了有特殊意义的4个类(例如,.alert-success),代表不同的警告信息

.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;
}

  警告框没有默认类,只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您使用一种有意义的警告类。目前提供了成功、消息、警告和危险

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

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

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

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

<div class="alert" role="alert">基类</div>
<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> 

可关闭

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

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

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

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

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

.alert-dismissable {
  padding-right: 35px;
}
.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

链接

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

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

.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;
}
<div class="alert alert-success" role="alert">成功 <a href="#" class="alert-link">详情查看</a></div>
<div class="alert alert-info" role="alert">信息提示 <a href="#" class="alert-link">详情查看</a></div>
<div class="alert alert-warning" role="alert">警告 <a href="#" class="alert-link">详情查看</a></div>
<div class="alert alert-danger" role="alert">错误 <a href="#" class="alert-link">详情查看</a></div> 


上一篇:【文学文娱】《贺吾司11载之奥森健康跑》
下一篇:写出一条Sql语句:取出表A中第31到第40记录(SQLServer,以自动增长的ID作为主键,注意:ID可能不是连续的。

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款