Bootstrap源碼解讀媒體對象、列表組和面板（10）
媒體對象
基礎(chǔ)媒體對象
例如：
<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/350x150" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">系列：十天精通CSS3</h4> <div>全方位深刻詳解CSS3模塊知識，經(jīng)典案例分析，代碼同步調(diào)試，讓網(wǎng)頁穿上絢麗裝備！</div> </div> </div>
實現(xiàn)原理只是設(shè)置他們之間的間距。
媒體對象的嵌套
只需要將另一個媒體對象結(jié)構(gòu)放置在媒體對象的主體“media-body”內(nèi)即可。
媒體對象列表
使用ul，并且在ul上添加類名“media-list”，而在li上使用類名“media”即可。
媒體對象列表只是把列表的左間距置０以及去掉了項目列表符號，實現(xiàn)源碼如下：
.media-list {
padding-left: 0;
list-style: none;
}
列表組
基礎(chǔ)列表組
基礎(chǔ)列表組主要包括兩個部分：
list-group：列表組容器，常用的是ul元素，也可以是ol或者div元素
list-group-item：列表項，常用的是li元素，也可以是div元素
例如：
<ul class="list-group"> <li class="list-group-item">111</li> <li class="list-group-item">222</li> <li class="list-group-item">333</li> </ul>
主要設(shè)置了其間距，邊框和圓角。實現(xiàn)源碼如下：
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
帶徽章的列表組
其實就是將徽章組件和基礎(chǔ)列表組結(jié)合在一起。只需要在“l(fā)ist-group-item”中添加徽章組件“badge”即可。例如：
<ul class="list-group"> <li class="list-group-item"> <span class="badge">2</span>列表項1 </li> <li class="list-group-item"> <span class="badge">3</span>列表項2 </li> <li class="list-group-item"> <span class="badge">4</span>列表項3 </li> </ul>
實現(xiàn)原理就是給徽章設(shè)置了一個右浮動，如果有兩個徽章同時在一個列表項中出現(xiàn)時，設(shè)置了他們之間的距離。實現(xiàn)源碼如下：
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}
帶鏈接的列表組
要讓列表組帶鏈接，我們可以給列表項的文本添加鏈接<a>標簽，然后增加style=”display: block”使整行可點擊。例如：
<ul class="list-group"> <li class="list-group-item"> <a href="##" style="display: block">111</a> </li> <li class="list-group-item"> <a href="##" style="display: block">222</a> </li> <li class="list-group-item"> <a href="##" style="display: block">333</a> </li> </ul>
不過Bootstrap有另外的實現(xiàn)方式，就是把ul.list-group使用div.list-group來替換，而li.list-group-item直接用a.list-group-item來替換。例如：
<div class="list-group"> <a href="##" class="list-group-item">列表項1</a> <a href="##" class="list-group-item">列表項2</a> <a href="##" class="list-group-item">列表項3</a> </div>
主要是給文本去掉了下劃線，增加懸浮效果。實現(xiàn)源碼如下：
a.list-group-item {
color: #555;
}
a.list-group-item .list-group-item-heading {
color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
}
自定義列表組
在鏈接列表組的基礎(chǔ)上新增了兩個樣式：
list-group-item-heading：用來定義列表項頭部樣式
list-group-item-text：用來定義列表項主要內(nèi)容
例如：
<div class="list-group"> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">標題1</h4> <p class="list-group-item-text">內(nèi)容1內(nèi)容1內(nèi)容1</p> </a> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">標題2</h4> <p class="list-group-item-text">內(nèi)容2內(nèi)容2內(nèi)容2</p> </a> </div>
實現(xiàn)源碼如下：
a.list-group-item .list-group-item-heading {
color: #333;
}
.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
color: inherit;
}
.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
color: #777;
}
.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
color: #e1edf7;
}
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
列表項的狀態(tài)設(shè)置
在對應(yīng)的列表項中添加類名“active/disabled”即可。
彩色列表組
在“l(fā)ist-group-item”基礎(chǔ)上增加對應(yīng)的類名即可：
list-group-item-success：成功綠
list-group-item-info：信息藍
list-group-item-warning：警告黃
list-group-item-danger：錯誤紅
實現(xiàn)原理其實僅僅是修改了背景、文本和邊框的顏色而已。
面板
基礎(chǔ)面板
基礎(chǔ)面板就是div容器運用了“panel”樣式，產(chǎn)生一個具有邊框的文本顯示塊，然后在里面添加了一個“div.panel-body”來放置面板主體內(nèi)容。由于“panel”不控制主題顏色，所以我們在“panel”的基礎(chǔ)上增加一個控制顏色的主題“panel-default”。例如：
<div class="panel panel-default"> <div class="panel-body">基礎(chǔ)面板</div> </div>
實現(xiàn)源碼如下：
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
padding: 15px;
}
面板的頭和尾
使用panel-heading和panel-footer即可。例如：
<div class="panel panel-default"> <div class="panel-heading">頭部內(nèi)容</div> <div class="panel-body正文內(nèi)容</div> <div class="panel-footer">尾部內(nèi)容</div> </div>
實現(xiàn)源碼如下：
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
color: inherit;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.panel-title > a {
color: inherit;
}
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
彩色面板
面板組件除了默認的主題樣式panel-default之外，還有以下幾種彩色主題樣式：
panel-primary：重點藍
panel-success：成功綠
panel-info：信息藍
panel-warning：警告黃
panel-danger：危險紅
例如：<div class="panel panel-primary">…</div>
面板中嵌套表格
例如：
<div class="panel panel-primary"> <div class="panel-heading">這里是標題</div> <div class="panel-body"> <p>這里是正文</p> </div> <table class="table table-bordered"> <thead> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> </tr> </thead> <tbody> <tr> <td>表內(nèi)容1</td> <td>表內(nèi)容2</td> <td>表內(nèi)容3</td> </tr> </tbody> </table> <div class="panel-footer">這里是尾巴</div> </div>
我們這里吧table放在和panel-body平級的地方。把table放在panel-body里面也可以，不過由于panel-body設(shè)置了一個padding：15px的值，所以那樣的話表格和面板邊緣會有一點間距，不太好看。
面板中嵌套列表組
例如：
<div class="panel panel-primary"> <div class="panel-heading">這里是標題</div> <div class="panel-body"> <p>這里是正文</p> </div> <ul class="list-group"> <li class="list-group-item">列表項1</li> <li class="list-group-item">列表項2</li> <li class="list-group-item">列表項3</li> </ul> <div class="panel-footer">這里是尾巴</div> </div>
本文系列教程整理到：Bootstrap基礎(chǔ)教程 專題中，歡迎點擊學習。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)的字符串數(shù)組去重功能小結(jié)
這篇文章主要介紹了JS實現(xiàn)的字符串數(shù)組去重功能,結(jié)合實例形式分析了javascript基于ES6、ES5、ES3及正則實現(xiàn)數(shù)組去重的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了javascript中使用連等賦值操作帶來的問題的相關(guān)資料,需要的朋友可以參考下2015-11-11
微信小程序?qū)崙?zhàn)之自定義模態(tài)彈窗（8）
這篇文章主要為大家詳細介紹了微信小程序?qū)崙?zhàn)之自定義模態(tài)彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了taro小程序添加骨架屏的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
js 數(shù)組實現(xiàn)一個類似ruby的迭代器
今天突然發(fā)現(xiàn)js的數(shù)組處理起來真是麻煩,代碼一些就是一大堆,相比起ruby的迭代器來真是遜色不少。2009-10-10
在日常前端開發(fā)中,大屏項目是每個前端開發(fā)者必備技能,但是目前設(shè)備尺寸大小和分辨率都不相同,所以大屏適配成了一個頭疼的問題,所以下面這篇文章主要給大家介紹了關(guān)于前端大屏適配的三種解決方案,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單圖片切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置placeholder提示文字及按鈕選中/取消狀態(tài)的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動態(tài)設(shè)置placeholder提示文字及按鈕選中/取消狀態(tài)的方法,涉及事件綁定及this.setData動態(tài)設(shè)置屬性數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動功能代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄和內(nèi)容上下聯(lián)動功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細介紹了關(guān)于Bootstrap基本模板的使用和理解的學習記錄，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12