Bootstrap提示信息(标签、徽章、巨幕和页头)

前面的话

在Bootstrap中,有一些组件用于提示信息,如 标签、徽章、巨幕和页头。本文将详细介绍Bootstrap提示信息

标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个”new标签,来告诉用户

在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以”.label样式来实现高亮显示

使用方法很简单,可以在使用span这样的行内标签

<h3>Example heading New</h3>

【自动隐藏】

当没有内容的时候,自动隐藏

.label:empty {
    display: none;
}
<h3>Example heading </h3>

【颜色设置】

和按钮元素button类似,label样式也提供了多种颜色:

☑   label-default:默认标签,深灰色

☑   label-primary:主要标签,深蓝色

☑   label-success:成功标签,绿色

☑   label-info:信息标签,浅蓝色

☑   label-warning:警告标签,橙色

☑   label-danger:错误标签,红色

主要是通过这几个类名来修改背景颜色和文本颜色

Default
Primary
Success
Info
Warning
Danger

徽章

从某种意义上来说,徽章效果和前面介绍的标签效果极其相似。也用来做一些提示信息使用。常出现的是一些系统发出的信息,比如系统提示有多少信息未读 

在Bootstrap框架中,把这种效果称作为徽章效果,使用”badge样式来实现

可以像标签一样,使用span标签来制作,然后加入badge

<a href="#">Inbox 42</a>

【自动隐藏】

如果没有新的或未读的信息条目,也就是说不包含任何内容,徽章组件能够自动隐藏(通过CSS的 :empty 选择符实现)  

.badge:empty {
    display: none;
}
<a href="#">Inbox </a>

【按钮徽章】

徽章在按钮元素button和胶囊形导航nav-pills也有类似的样式,只不过颜色不同

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home 42</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages 3</a></li>
</ul>
<button class="btn btn-primary" type="button">
  Messages 4
</button>

巨幕

这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容

<div class="jumbotron">
  <h1>小火柴的蓝色理想</h1>
  <p>好的代码像粥一样,都是用时间熬出来的</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

如果为巨幕组件添加圆角,把此组件放在 .container 元素的里面即可

<div class="container">
    <div class="jumbotron">
        <h1>小火柴的蓝色理想</h1>
        <p>好的代码像粥一样,都是用时间熬出来的</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</div>

页头

页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}
<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

相关推荐