Bootstrap每天必學之標籤與徽章_javascript技巧

1、標籤

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

那麼在Bootstrap框架中刻意將這樣的效果提取出來成為一個標籤元件，並且以「.label」樣式來實現高亮顯示。

既然他是獨立的元件，當然在不同的版本下有不同的檔案：

☑ LESS版本：對應的原始檔label.less

☑ Sass版本：對應的來源檔案_label.scss

☑ 編譯後版本：bootstrap.css檔案第4261行～第4327行

1）、使用原理：

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

複製程式碼 程式碼如下:

Example heading New

運作效果：

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 />

 运行效果:

样式代码请查看bootstrap.css文件第4345行～第4366行。

注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。

通过上文的介绍大家对标签和徽章是不是有了大概的了解，希望大家把标签和徽章应用到自己的网站中，真正的做到学以致用。