在一些web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户
【相关视频推荐:Bootstrap教程】
在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示
使用方法很简单,可以在使用span这样的行内标签
Example heading New
【自动隐藏】
当没有内容的时候,自动隐藏
.label:empty {display: none;
}Example heading
【颜色设置】
和按钮元素button类似,label样式也提供了多种颜色:
☑ label-default:默认标签,深灰色
☑ label-primary:主要标签,深蓝色
☑ label-success:成功标签,绿色
☑ label-info:信息标签,浅蓝色
☑ label-warning:警告标签,橙色
☑ label-danger:错误标签,红色
主要是通过这几个类名来修改背景颜色和文本颜色
DefaultPrimarySuccessInfoWarningDanger
徽章
从某种意义上来说,徽章效果和前面介绍的标签效果极其相似。也用来做一些提示信息使用。常出现的是一些系统发出的信息,比如系统提示有多少信息未读
前台功能介绍:1、网页首页显示有高级会员推荐,精品推荐,商业机会分类列表,最新供求信息,网站动态,推荐企业,行业动态等;2、商业机会栏目功能有:二级分类,已经带有详细分类的数据库,后台可以更改增加操作,并可以推荐公司,栏目分为分类显示信息,最新的采购、供应、合作和代理信息,搜索时同样按分类,信息,时间,交易类型等搜索;3、展厅展品栏目功能:二级分类,已经带有详细分类的数据库,后台可以更改增加操作,
在Bootstrap框架中,把这种效果称作为徽章效果,使用“badge”样式来实现
可以像标签一样,使用span标签来制作,然后加入badge类
【自动隐藏】
如果没有新的或未读的信息条目,也就是说不包含任何内容,徽章组件能够自动隐藏(通过CSS的 :empty 选择符实现)
.badge:empty {display: none;
}【按钮徽章】
徽章在按钮元素button和胶囊形导航nav-pills也有类似的样式,只不过颜色不同
巨幕
这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容
如果为巨幕组件添加圆角,把此组件放在 .container 元素的里面即可
页头
页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)
.page-header {padding-bottom: 9px;margin: 40px 0 20px;border-bottom: 1px solid #eee;
}Example page header Subtext for header









