Bootstrap每天必學(xué)之標(biāo)簽與徽章
1、標(biāo)簽
在一些Web頁面中常常會(huì)添加一個(gè)標(biāo)簽用來告訴用戶一些額外的信息，比如說在導(dǎo)航上添加了一個(gè)新導(dǎo)航項(xiàng)，可能就會(huì)加一個(gè)“new”標(biāo)簽，來告訴用戶。這是新添加的導(dǎo)航項(xiàng)。如下圖所示：
那么在Bootstrap框架中特意將這樣的效果提取出來成為一個(gè)標(biāo)簽組件，并且以“.label”樣式來實(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)簽：
運(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)簽元素來制作的話，為了讓其更美觀，在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)沒有內(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)簽，紅色
主要是通過這幾個(gè)類名來修改背景顏色和文本顏色：
<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、徽章
從某種意義上來說，徽章效果和前面介紹的標(biāo)簽效果是極其的相似。也是用來做一些提示信息使用。常出現(xiàn)的是一些系統(tǒng)發(fā)出的信息，比如你登錄你的twitter后，如果你信息沒有看，系統(tǒng)會(huì)告訴你有多少信息未讀，如下圖所示：
在Bootstrap框架中，把這種效果稱作為徽章效果，使用“badge”樣式來實(shí)現(xiàn)。
對(duì)應(yīng)的文件版本：
☑ LESS版本：源文件badges.less
☑ Sass版本：源文件_badges.scss
☑ 編譯后版本：bootstrap.css文件第4328行～第4366行
使用方法：
使用方法，其實(shí)也沒什么太多可說的，你可以像標(biāo)簽一樣，使用span標(biāo)簽來制作，然后為他加入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)沒有內(nèi)容的時(shí)候隱藏：
.badge:empty {
display: none;
}
正如開頭所說，可以將徽章與按鈕或者導(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)站首頁</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也可以有類似的樣式，只不過是顏色不同而以：
<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)行效果:
樣式代碼請(qǐng)查看bootstrap.css文件第4345行～第4366行。
注意：不過和標(biāo)簽組件不一樣的是：在徽章組件中沒有提供多種顏色風(fēng)格的效果，不過你也可以通過badges.less或者_(dá)badges.scss快速自定義。此處對(duì)不做過多闡述。
通過上文的介紹大家對(duì)標(biāo)簽和徽章是不是有了大概的了解，希望大家把標(biāo)簽和徽章應(yīng)用到自己的網(wǎng)站中，真正的做到學(xué)以致用。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
- 利用純Vue.js構(gòu)建Bootstrap組件
- 簡(jiǎn)單實(shí)現(xiàn)Bootstrap標(biāo)簽頁
- Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換(17)
- Bootstrap基本樣式學(xué)習(xí)筆記之標(biāo)簽(5)
- BootStrap框架個(gè)人總結(jié)(bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁tabs、模態(tài)框、菜單定位)
- 基于Bootstrap實(shí)現(xiàn)tab標(biāo)簽切換效果
- Bootstrap每天必學(xué)之標(biāo)簽頁（Tab）插件
- bootstrap vue.js實(shí)現(xiàn)tab效果
相關(guān)文章
JavaScript快速排序(quickSort)算法的實(shí)現(xiàn)方法總結(jié)
快速排序的思想式 分治法,選一個(gè)基準(zhǔn)點(diǎn),然后根據(jù)大小進(jìn)行分配,分配然完畢之后,對(duì)已經(jīng)分配的進(jìn)行遞歸操作,最終形成快速排序,所以遞歸也是快速排序思想的一個(gè)重要組成部分,本文主要給大家介紹了JavaScript實(shí)現(xiàn)快速排序的寫法,需要的朋友可以參考下2023-11-11
解析JavaScript中點(diǎn)號(hào)“.”的多義性
這篇文章主要介紹了JavaScript中點(diǎn)號(hào)“.”的多義性。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
最近對(duì)eval火爆的討論，教主 @Franky 和 灰大 @otakustay 也給了精彩的數(shù)據(jù)分析,剛好之前也做過類似的測(cè)試，我也跟風(fēng)湊個(gè)熱鬧，提供兩組數(shù)據(jù)供大家參考2012-08-08
js防刷新的倒計(jì)時(shí)代碼 js倒計(jì)時(shí)代碼
這篇文章主要為大家詳細(xì)介紹了js防刷新的倒計(jì)時(shí)代碼，js倒計(jì)時(shí)的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
JavaScript鼠標(biāo)事件監(jiān)聽、觸發(fā)時(shí)機(jī)和觸發(fā)順序?qū)嵗v解
事件監(jiān)聽是Web開發(fā)中非常重要的一個(gè)概念,掌握了它的用法,可以讓我們實(shí)現(xiàn)更加豐富和動(dòng)態(tài)的交互效果,這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)事件監(jiān)聽、觸發(fā)時(shí)機(jī)和觸發(fā)順序的相關(guān)資料,需要的朋友可以參考下2024-01-01
JS實(shí)現(xiàn)選項(xiàng)卡效果的代碼實(shí)例
這篇文章主要介紹了JS選項(xiàng)卡效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了OpenLayers加載縮放控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
關(guān)于JavaScript中URL對(duì)象的一些妙用
avaScript URL() 構(gòu)造函數(shù)返回一個(gè)新創(chuàng)建的 URL 對(duì)象,表示由一組參數(shù)定義的 URL,利用該構(gòu)造函數(shù)可以獲取 RL的查詢、參數(shù)等,下面這篇文章主要給大家介紹了關(guān)于JavaScript URL對(duì)象的一些妙用,需要的朋友可以參考下2021-10-10
本篇文章給大家詳細(xì)分析了js調(diào)用json方法的總結(jié)，對(duì)此有需要的朋友可以參考學(xué)習(xí)下。2018-02-02
javascript中加var和不加var的區(qū)別 你真的懂嗎
var 語句用于聲明變量，本文給大家介紹javascript 中加’var‘和不加'var'的區(qū)別，涉及到j(luò)avascript var相關(guān)知識(shí)，對(duì)javascript var相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01