Bootstrap源碼解讀標(biāo)簽、徽章、縮略圖和警示框（8）

更新時(shí)間：2016年12月26日 09:06:32 作者：藝術(shù)就是爆炸

這篇文章主要源碼解讀了標(biāo)簽、徽章、縮略圖和警示框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

標(biāo)簽

標(biāo)簽組件通常用來做一些高亮顯示用以提醒。使用“.label”樣式來實(shí)現(xiàn)，可以使用span這樣的行內(nèi)標(biāo)簽，例如：<span class="label">標(biāo)簽</span>
實(shí)現(xiàn)源碼如下：

.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)簽元素來制作標(biāo)簽，實(shí)現(xiàn)源碼如下：

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

標(biāo)簽內(nèi)沒有內(nèi)容的時(shí)候會被隱藏，實(shí)現(xiàn)源碼如下：

.label:empty {
 display: none;
}

可以追加顏色樣式，類名如下：
.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)簽，紅色

實(shí)現(xiàn)代碼如下：

.label-default {
 background-color: #777;
}
.label-default[href]:hover,
.label-default[href]:focus {
 background-color: #5e5e5e;
}
.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;
}

徽章

徽章效果也是用來做一些提示信息使用，比如顯示有幾條未讀消息。使用“.badge”樣式來實(shí)現(xiàn)。可以使用span標(biāo)簽來制作，例如：<a href="#">未讀消息<span class="badge">3</span></a>
實(shí)現(xiàn)源碼如下：

.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: #777;
 border-radius: 10px;
}

當(dāng)沒有內(nèi)容的時(shí)候隱藏，實(shí)現(xiàn)源碼如下：

.badge:empty {
display: none;
}

徽章可以與按鈕或者導(dǎo)航之類配合使用，實(shí)現(xiàn)源碼如下：

.btn .badge {
 position: relative;
 top: -1px;
}
.btn-xs .badge {
 top: 0;
 padding: 1px 5px;
}
a.badge:hover,
a.badge:focus {
 color: #fff;
 text-decoration: none;
 cursor: pointer;
}
a.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
 color: #428bca;
 background-color: #fff;
}
.nav-pills > li > a > .badge {
 margin-left: 3px;
}

縮略圖

簡單縮略圖

通過“thumbnail”樣式配合bootstrap的網(wǎng)格系統(tǒng)來實(shí)現(xiàn)。例如：

<div class="container">
 <div class="row">
 <div class="col-md-3">
  <a href="#" class="thumbnail">
  <img alt="100%x180" src="http://placehold.it/350x150" style="height: 180px; width: 100%; display: block;" >
  </a>
 </div>
 ...
 </div>
</div>

縮略圖的實(shí)現(xiàn)源碼如下：

.thumbnail {
 display: block;
 padding: 4px;
 margin-bottom: 20px;
 line-height: 1.42857143;
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 4px;
 -webkit-transition: border .2s ease-in-out;
 -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
}
.thumbnail > img,
.thumbnail a > img {
 margin-right: auto;
 margin-left: auto;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
 border-color: #428bca;
}
.thumbnail .caption {
 padding: 9px;
 color: #333;
}

復(fù)雜縮略圖

還可以配合標(biāo)題、描述內(nèi)容，按鈕來制作復(fù)雜的縮略圖。在縮略圖的基礎(chǔ)上，添加一個(gè)div名為“caption”的容器，在這個(gè)容器中放置其他內(nèi)容，比如說標(biāo)題，文本描述，按鈕等。例如：

<div class="container">
 <div class="row">
 <div class="col-md-3">
  <a href="#" class="thumbnail">
  <img src="http://placehold.it/350x150" style="height: 180px; width: 100%; display: block;" alt="">
  </a>
  <div class="caption">
  <h3>Bootstrap</h3>
  <p>Bootstrap框架是一個(gè)優(yōu)秀的前端框架，快來學(xué)習(xí)吧！</p>
  <p>
   <a href="##" class="btn btn-primary">按鈕1</a>
   <a href="##" class="btn btn-info">按鈕2</a>
  </p>
  </div>
 </div>
 ...
 </div>
</div>

警示框

基本的警示框

使用在div上使用“alert“樣式來實(shí)現(xiàn)警示框效果。
實(shí)現(xiàn)源碼如下：

.alert {
 padding: 15px;
 margin-bottom: 20px;
 border: 1px solid transparent;
 border-radius: 4px;
}
.alert h4 {
 margin-top: 0;
 color: inherit;
}
.alert .alert-link {
 font-weight: bold;
}
.alert > p,
.alert > ul {
 margin-bottom: 0;
}
.alert > p + p {
 margin-top: 5px;
}

可以追加類名來實(shí)現(xiàn)不同的警示框效果：
1. .alert-success 成功警示框，背景、邊框和文本都是綠色
2. .alert-info 信息警示框，背景、邊框和文本都是淺藍(lán)色
3. .alert-warning 警告警示框，背景、邊框、文本都是淺黃色
4. .alert-danger 錯(cuò)誤警示框，背景、邊框和文本都是淺紅色
例如：<div class="alert alert-danger" role="alert">對不起，您輸入的密碼有誤</div>
實(shí)現(xiàn)源碼如下：

.alert-success {
 color: #3c763d;
 background-color: #dff0d8;
 border-color: #d6e9c6;
}
.alert-success hr {
 border-top-color: #c9e2b3;
}
.alert-success .alert-link {
 color: #2b542c;
}
.alert-info {
 color: #31708f;
 background-color: #d9edf7;
 border-color: #bce8f1;
}
.alert-info hr {
 border-top-color: #a6e1ec;
}
.alert-info .alert-link {
 color: #245269;
}
.alert-warning {
 color: #8a6d3b;
 background-color: #fcf8e3;
 border-color: #faebcc;
}
.alert-warning hr {
 border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
 color: #66512c;
}
.alert-danger {
 color: #a94442;
 background-color: #f2dede;
 border-color: #ebccd1;
}
.alert-danger hr {
 border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
 color: #843534;
}

可關(guān)閉的警示框

使用方法如下：
1. 在基本警示框“alert”的基礎(chǔ)上添加“alert-dismissable”樣式。
2. 在警示框內(nèi)加入一個(gè)按鈕。
3. 在這個(gè)button標(biāo)簽中加入class=”close”類，實(shí)現(xiàn)警示框關(guān)閉按鈕的樣式。
4. 關(guān)閉按鈕元素上設(shè)置自定義屬性：“data-dismiss=”alert”。因?yàn)榭申P(guān)閉警示框需要借助于Javascript來檢測該屬性，從而控制警示框的關(guān)閉。
例如：

<div class="alert alert-danger alert-dismissable" role="alert">
 <button class="close" type="button" data-dismiss="alert">&times;</button>
 對不起，您輸入的密碼有誤
</div>

實(shí)現(xiàn)源碼如下：

.alert-dismissable,
.alert-dismissible {
 padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
 position: relative;
 top: -2px;
 right: -21px;
 color: inherit;
}

警示框的鏈接

給警示框加的鏈接添加“alert-link”的類名，通過“alert-link”樣式給鏈接提供高亮顯示。
例如：

<div class="alert alert-success" role="alert">
 <strong>申請成功！</strong>
 下一步請
 <a href="#" class="alert-link">驗(yàn)證郵箱</a>
 。
</div>

實(shí)現(xiàn)源碼如下：

.alert .alert-link {
 font-weight: bold;
}
.alert-success .alert-link {
 color: #2b542c;
}
.alert-info .alert-link {
 color: #245269;
}
.alert-warning .alert-link {
 color: #66512c;
}
.alert-danger .alert-link {
 color: #843534;
}

本文系列教程整理到：Bootstrap基礎(chǔ)教程專題中，歡迎點(diǎn)擊學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: