Bootstrap每天必學之標簽與徽章

2019-11-20 11:08:39

字體：大中小

來源：轉載

供稿：網友

1、標簽

在一些Web頁面中常常會添加一個標簽用來告訴用戶一些額外的信息，比如說在導航上添加了一個新導航項，可能就會加一個“new”標簽，來告訴用戶。這是新添加的導航項。如下圖所示：

那么在Bootstrap框架中特意將這樣的效果提取出來成為一個標簽組件，并且以“.label”樣式來實現高亮顯示。

既然他是一個獨立的組件，當然在不同的版本下有不同的文件：

☑ LESS版本：對應的源文件label.less

☑ Sass版本：對應的源文件_label.scss

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

1）、使用原理：

使用方法很簡單，你可以在使用span這樣的行內標簽：

復制代碼代碼如下:

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

運行效果：

2）、實現原理：

/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標簽元素來制作的話，為了讓其更美觀，在hover狀態去掉下劃線之類：

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

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

有的時候標簽內沒有內容的時候，可以借助CSS3的:empty偽元素將其隱藏：

.label:empty {display: none;}

3）、顏色樣式設置：

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

☑ label-deafult：默認標簽，深灰色

☑ label-primary：主要標簽，深藍色

☑ label-success：成功標簽，綠色

☑ label-info：信息標簽，淺藍色

☑ label-warning：警告標簽，橙色

☑ label-danger：錯誤標簽，紅色

主要是通過這幾個類名來修改背景顏色和文本顏色：

<span class="label label-default">默認標簽</span><span class="label label-primary">主要標簽</span><span class="label label-success">成功標簽</span><span class="label label-info">信息標簽</span><span class="label label-warning">警告標簽</span><span class="label label-danger">錯誤標簽</span>

運行效果：

4、顏色實現原理：

/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、徽章

從某種意義上來說，徽章效果和前面介紹的標簽效果是極其的相似。也是用來做一些提示信息使用。常出現的是一些系統發出的信息，比如你登錄你的twitter后，如果你信息沒有看，系統會告訴你有多少信息未讀，如下圖所示：

在Bootstrap框架中，把這種效果稱作為徽章效果，使用“badge”樣式來實現。

對應的文件版本：

☑ LESS版本：源文件badges.less

☑ Sass版本：源文件_badges.scss

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

使用方法：

使用方法，其實也沒什么太多可說的，你可以像標簽一樣，使用span標簽來制作，然后為他加入badge類：

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

運行效果:

1）、實現原理：

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

/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`偽元素，當沒有內容的時候隱藏：

.badge:empty {display: none;}

正如開頭所說，可以將徽章與按鈕或者導航之類配合使用：

<div class="navbar navbar-default" role="navigation">　<div class="navbar-header">　  <a href="##" class="navbar-brand">慕課網</a>　</div> <ul class="nav navbar-nav">   <li class="active"><a href="##">網站首頁</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="##">關于我們</a></li> </ul></div>

運行效果

2）、按鈕和膠囊形導航設置徽章：

另外，徽章在按鈕元素button和膠囊形導航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 />

運行效果: