媒體對象
基礎媒體對象
例如：
<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模塊知識，經典案例分析，代碼同步調試，讓網頁穿上絢麗裝備！</div> </div></div>
實現原理只是設置他們之間的間距。
媒體對象的嵌套
只需要將另一個媒體對象結構放置在媒體對象的主體“media-body”內即可。
媒體對象列表
使用ul，并且在ul上添加類名“media-list”，而在li上使用類名“media”即可。
媒體對象列表只是把列表的左間距置０以及去掉了項目列表符號，實現源碼如下：
.media-list { padding-left: 0; list-style: none;}列表組
基礎列表組
基礎列表組主要包括兩個部分：
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>
主要設置了其間距，邊框和圓角。實現源碼如下：
.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;}帶徽章的列表組
其實就是將徽章組件和基礎列表組結合在一起。只需要在“list-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>
實現原理就是給徽章設置了一個右浮動，如果有兩個徽章同時在一個列表項中出現時，設置了他們之間的距離。實現源碼如下：
.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有另外的實現方式，就是把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>
主要是給文本去掉了下劃線，增加懸浮效果。實現源碼如下：
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;}自定義列表組
在鏈接列表組的基礎上新增了兩個樣式：
list-group-item-heading：用來定義列表項頭部樣式
list-group-item-text：用來定義列表項主要內容
例如：
<div class="list-group"> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">標題1</h4> <p class="list-group-item-text">內容1內容1內容1</p> </a> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">標題2</h4> <p class="list-group-item-text">內容2內容2內容2</p> </a></div>
實現源碼如下：
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;}列表項的狀態設置
在對應的列表項中添加類名“active/disabled”即可。
彩色列表組
在“list-group-item”基礎上增加對應的類名即可：
list-group-item-success：成功綠
list-group-item-info：信息藍
list-group-item-warning：警告黃
list-group-item-danger：錯誤紅
實現原理其實僅僅是修改了背景、文本和邊框的顏色而已。
面板
基礎面板
基礎面板就是div容器運用了“panel”樣式，產生一個具有邊框的文本顯示塊，然后在里面添加了一個“div.panel-body”來放置面板主體內容。由于“panel”不控制主題顏色，所以我們在“panel”的基礎上增加一個控制顏色的主題“panel-default”。例如：
<div class="panel panel-default"> <div class="panel-body">基礎面板</div></div>
實現源碼如下：
.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">頭部內容</div> <div class="panel-body正文內容</div> <div class="panel-footer">尾部內容</div></div>
實現源碼如下：
.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>表內容1</td> <td>表內容2</td> <td>表內容3</td> </tr> </tbody> </table> <div class="panel-footer">這里是尾巴</div></div>
我們這里吧table放在和panel-body平級的地方。把table放在panel-body里面也可以，不過由于panel-body設置了一個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基礎教程 專題中，歡迎點擊學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
