Bootstrap源碼解讀標簽、徽章、縮略圖和警示框（8）
標簽
標簽組件通常用來做一些高亮顯示用以提醒。使用“.label”樣式來實現(xiàn)，可以使用span這樣的行內(nèi)標簽，例如：<span class="label">標簽</span>
實現(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標簽元素來制作標簽，實現(xiàn)源碼如下：
a.label:hover,
a.label:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
標簽內(nèi)沒有內(nèi)容的時候會被隱藏，實現(xiàn)源碼如下：
.label:empty {
display: none;
}
可以追加顏色樣式，類名如下：
.label-deafult:默認標簽，深灰色
.label-primary：主要標簽，深藍色
.label-success：成功標簽，綠色
.label-info：信息標簽，淺藍色
.label-warning：警告標簽，橙色
.label-danger：錯誤標簽，紅色
實現(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”樣式來實現(xiàn)?？梢允褂胹pan標簽來制作，例如：<a href="#">未讀消息<span class="badge">3</span></a>
實現(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;
}
當沒有內(nèi)容的時候隱藏，實現(xiàn)源碼如下：
.badge:empty {
display: none;
}
徽章可以與按鈕或者導航之類配合使用，實現(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)來實現(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>
縮略圖的實現(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;
}
復雜縮略圖
還可以配合標題、描述內(nèi)容，按鈕來制作復雜的縮略圖。在縮略圖的基礎上，添加一個div名為“caption”的容器，在這個容器中放置其他內(nèi)容，比如說標題，文本描述，按鈕等。例如：
<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框架是一個優(yōu)秀的前端框架，快來學習吧！</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“樣式來實現(xiàn)警示框效果。
實現(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;
}
可以追加類名來實現(xiàn)不同的警示框效果：
1. .alert-success 成功警示框，背景、邊框和文本都是綠色
2. .alert-info 信息警示框，背景、邊框和文本都是淺藍色
3. .alert-warning 警告警示框，背景、邊框、文本都是淺黃色
4. .alert-danger 錯誤警示框，背景、邊框和文本都是淺紅色
例如：<div class="alert alert-danger" role="alert">對不起，您輸入的密碼有誤</div>
實現(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;
}
可關閉的警示框
使用方法如下：
1. 在基本警示框“alert”的基礎上添加“alert-dismissable”樣式。
2. 在警示框內(nèi)加入一個按鈕。
3. 在這個button標簽中加入class=”close”類，實現(xiàn)警示框關閉按鈕的樣式。
4. 關閉按鈕元素上設置自定義屬性：“data-dismiss=”alert”。因為可關閉警示框需要借助于Javascript來檢測該屬性，從而控制警示框的關閉。
例如：
<div class="alert alert-danger alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 對不起，您輸入的密碼有誤 </div>
實現(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">驗證郵箱</a> 。 </div>
實現(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基礎教程 專題中，歡迎點擊學習。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解webpack分離css單獨打包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
本文總結(jié)了5種javascript與CSS交互的方法，都是平時項目中經(jīng)常用到的，這里推薦給大家2014-12-12
下面小編就為大家?guī)硪黄獪\談時鐘的生成(js手寫簡潔代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細介紹了功能強大的Bootstrap使用手冊，分享了Bootstrap使用步驟和常用用法，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細介紹了OpenLayers3實現(xiàn)圖層控件功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
在本篇文章里小編給各位整理的是關于原生js實現(xiàn)文件上傳、下載、封裝等實例方法，需要的朋友們可以參考學習下。2020-01-01
本文主要介紹了js實現(xiàn)登錄框鼠標拖拽效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了如何理解JavaScript中的對象，幫助大家更好的學習JavaScript，感興趣的朋友可以了解下2020-08-08
本文介紹了如何使用微信小程序技術制作個性化的婚禮邀請函,包括頁面布局、交互設計和多媒體資源整合,詳細闡述了從功能需求到頁面設計、測試優(yōu)化以及發(fā)布流程的全面開發(fā)步驟,通過本項目,可以提升創(chuàng)意設計和用戶體驗優(yōu)化的能力,需要的朋友可以參考下2024-10-10
基于Bootstrap的Metronic框架實現(xiàn)頁面鏈接收藏夾功能
本文給大家介紹基于Metronic的Bootstrap開發(fā)框架實現(xiàn)頁面鏈接收藏夾功能，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-08-08