Bootstrap每天必學(xué)之標(biāo)簽與徽章

更新時(shí)間：2015年11月27日 15:09:41 作者：小平果118

Bootstrap每天必學(xué)之標(biāo)簽與徽章，對(duì)Bootstrap標(biāo)簽與徽章小編也了解的很少，希望通過(guò)這篇文章和大家更多的去學(xué)習(xí)Bootstrap標(biāo)簽與徽章，從中得到收獲。

1、標(biāo)簽

在一些Web頁(yè)面中常常會(huì)添加一個(gè)標(biāo)簽用來(lái)告訴用戶一些額外的信息，比如說(shuō)在導(dǎo)航上添加了一個(gè)新導(dǎo)航項(xiàng)，可能就會(huì)加一個(gè)“new”標(biāo)簽，來(lái)告訴用戶。這是新添加的導(dǎo)航項(xiàng)。如下圖所示：

那么在Bootstrap框架中特意將這樣的效果提取出來(lái)成為一個(gè)標(biāo)簽組件，并且以“.label”樣式來(lái)實(shí)現(xiàn)高亮顯示。

既然他是一個(gè)獨(dú)立的組件，當(dāng)然在不同的版本下有不同的文件：

☑ LESS版本：對(duì)應(yīng)的源文件label.less

☑ Sass版本：對(duì)應(yīng)的源文件_label.scss

☑ 編譯后版本：bootstrap.css文件第4261行～第4327行

1）、使用原理：

使用方法很簡(jiǎn)單，你可以在使用span這樣的行內(nèi)標(biāo)簽：

復(fù)制代碼代碼如下:

<h3>Example heading <span class="label label-default">New</span></h3>

運(yùn)行效果：

2）、實(shí)現(xiàn)原理：

/bootstrap.css文件第4261行～第4272行/

.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}

如果使用的是a標(biāo)簽元素來(lái)制作的話，為了讓其更美觀，在hover狀態(tài)去掉下劃線之類：

/bootstrap.css文件第4273行～4278行/

.label[href]:hover,
.label[href]:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}

有的時(shí)候標(biāo)簽內(nèi)沒(méi)有內(nèi)容的時(shí)候，可以借助CSS3的:empty偽元素將其隱藏：

.label:empty {
display: none;
}

3）、顏色樣式設(shè)置：

和按鈕元素button類似，label樣式也提供了多種顏色：

☑ label-deafult：默認(rèn)標(biāo)簽，深灰色

☑ label-primary：主要標(biāo)簽，深藍(lán)色

☑ label-success：成功標(biāo)簽，綠色

☑ label-info：信息標(biāo)簽，淺藍(lán)色

☑ label-warning：警告標(biāo)簽，橙色

☑ label-danger：錯(cuò)誤標(biāo)簽，紅色

主要是通過(guò)這幾個(gè)類名來(lái)修改背景顏色和文本顏色：

<span class="label label-default">默認(rèn)標(biāo)簽</span>
<span class="label label-primary">主要標(biāo)簽</span>
<span class="label label-success">成功標(biāo)簽</span>
<span class="label label-info">信息標(biāo)簽</span>
<span class="label label-warning">警告標(biāo)簽</span>
<span class="label label-danger">錯(cuò)誤標(biāo)簽</span>

運(yùn)行效果：

4、顏色實(shí)現(xiàn)原理：

/bootstrap.css文件第4286行～第4237行/

.label-default {
background-color: #999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}

2、徽章

從某種意義上來(lái)說(shuō)，徽章效果和前面介紹的標(biāo)簽效果是極其的相似。也是用來(lái)做一些提示信息使用。常出現(xiàn)的是一些系統(tǒng)發(fā)出的信息，比如你登錄你的twitter后，如果你信息沒(méi)有看，系統(tǒng)會(huì)告訴你有多少信息未讀，如下圖所示：

在Bootstrap框架中，把這種效果稱作為徽章效果，使用“badge”樣式來(lái)實(shí)現(xiàn)。

對(duì)應(yīng)的文件版本：

☑ LESS版本：源文件badges.less

☑ Sass版本：源文件_badges.scss

☑ 編譯后版本：bootstrap.css文件第4328行～第4366行

使用方法：

使用方法，其實(shí)也沒(méi)什么太多可說(shuō)的，你可以像標(biāo)簽一樣，使用span標(biāo)簽來(lái)制作，然后為他加入badge類：

<a href="#">Inbox <span class="badge">42</span></a>

運(yùn)行效果:

1）、實(shí)現(xiàn)原理：

主要將其設(shè)置為橢圓形，并且加了一個(gè)背景色：

/bootstrap.css文件第4328行～第4341行/

.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #999;
border-radius: 10px;
}

同樣也使用`:empty`偽元素，當(dāng)沒(méi)有內(nèi)容的時(shí)候隱藏：

.badge:empty {
display: none;
}

正如開頭所說(shuō)，可以將徽章與按鈕或者導(dǎo)航之類配合使用：

<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　  <a href="##" class="navbar-brand">慕課網(wǎng)</a>
　</div>
 <ul class="nav navbar-nav">
   <li class="active"><a href="##">網(wǎng)站首頁(yè)</a></li>
   <li><a href="##">系列教程</a></li>
   <li><a href="##">名師介紹</a></li>
   <li><a href="##">成功案例<span class="badge">23</span></a></li>
   <li><a href="##">關(guān)于我們</a></li>
 </ul>
</div>

運(yùn)行效果

2）、按鈕和膠囊形導(dǎo)航設(shè)置徽章：

另外，徽章在按鈕元素button和膠囊形導(dǎo)航nav-pills也可以有類似的樣式，只不過(guò)是顏色不同而以：

<ul class="nav nav-pills">
 <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br />

運(yùn)行效果: