警告框(alert)消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框(alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能。
用法
您可以有以下两种方式启用警告框的可取消(dismissal)功能:
通过 data 属性:通过数据 API(Data API)添加可取消功能,只需要向关闭按钮添加 data-dismiss="alert",就会自动为警告框添加关闭功能。
默认用法
警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框,.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”样式,具体呈现的是背景、边框和文本都是浅红色
主要模块:首页商品推荐 /顾客留言发布 /商品分类浏览 /按商品分类、关键字搜索商品 /商品购物车 人信息中心 /显示商品详细介绍以及多图片显示功能 /商品类别管理有分大类中类的类别设定商品搜索类别设定 /商品管理有临时关闭不在线功能 /订单管理 /支付类型管理模块 留言管理 /后台权限分级管理 /密码修改 /新闻管理 /网站配置管理 /滚动广告管理v1.58更新:1、增强支付接口设置。2、内置支
基类成功信息提示警告错误
可关闭
在平时浏览网页的时候,会发现一些警示框带有关闭按钮,用户一点击关闭按钮就能自动关闭显示的警示框(也就是让警示框隐藏不显示)。在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;
}









