標簽
標簽組件通常用來做一些高亮顯示用以提醒。使用“.label”樣式來實現，可以使用span這樣的行內標簽，例如：<span class="label">標簽</span>
實現源碼如下：
.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標簽元素來制作標簽，實現源碼如下：
a.label:hover,a.label:focus { color: #fff; text-decoration: none; cursor: pointer;}標簽內沒有內容的時候會被隱藏，實現源碼如下：
.label:empty { display: none;}可以追加顏色樣式，類名如下：
.label-deafult:默認標簽，深灰色
.label-primary：主要標簽，深藍色
.label-success：成功標簽，綠色
.label-info：信息標簽，淺藍色
.label-warning：警告標簽，橙色
.label-danger：錯誤標簽，紅色
實現代碼如下：
.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”樣式來實現。可以使用span標簽來制作，例如：<a href="#">未讀消息<span class="badge">3</span></a>
實現源碼如下：
.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;}當沒有內容的時候隱藏，實現源碼如下：
.badge:empty {
display: none;
}
徽章可以與按鈕或者導航之類配合使用，實現源碼如下：
.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的網格系統來實現。例如：
<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>
縮略圖的實現源碼如下：
.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;}復雜縮略圖
還可以配合標題、描述內容，按鈕來制作復雜的縮略圖。在縮略圖的基礎上，添加一個div名為“caption”的容器，在這個容器中放置其他內容，比如說標題，文本描述，按鈕等。例如：
<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框架是一個優秀的前端框架，快來學習吧！</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“樣式來實現警示框效果。
實現源碼如下：
.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;}可以追加類名來實現不同的警示框效果：
1. .alert-success 成功警示框，背景、邊框和文本都是綠色
2. .alert-info 信息警示框，背景、邊框和文本都是淺藍色
3. .alert-warning 警告警示框，背景、邊框、文本都是淺黃色
4. .alert-danger 錯誤警示框，背景、邊框和文本都是淺紅色
例如：<div class="alert alert-danger" role="alert">對不起，您輸入的密碼有誤</div>
實現源碼如下：
.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;}可關閉的警示框
使用方法如下：
1. 在基本警示框“alert”的基礎上添加“alert-dismissable”樣式。
2. 在警示框內加入一個按鈕。
3. 在這個button標簽中加入class=”close”類，實現警示框關閉按鈕的樣式。
4. 關閉按鈕元素上設置自定義屬性：“data-dismiss=”alert”。因為可關閉警示框需要借助于Javascript來檢測該屬性，從而控制警示框的關閉。
例如：
<div class="alert alert-danger alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 對不起，您輸入的密碼有誤</div>
實現源碼如下：
.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">驗證郵箱</a> 。</div>
實現源碼如下：
.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基礎教程 專題中，歡迎點擊學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
