### 列表組組件
列表組組件用于顯示一組列表的組件。
~~~html
<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>
<li class="list-group-item">4.這是末尾</li>
</ul>
~~~
**列表項帶勛章**
~~~html
<li class="list-group-item">
MESSAGE
<span class="badge">10</span>
</li>
~~~
**鏈接和首選**
~~~html
<div class="list-group">
<a href="#" class="list-group-item active">1.這是起始
<span class="badge">10</span>
</a>
<a href="#" class="list-group-item">2.這是第二條數據</a>
<a href="#" class="list-group-item">3.這是第三排信息</a>
<a href="#" class="list-group-item">4.這是末尾</a>
</div>
~~~
**按鈕式列表**
~~~html
<div class="list-group">
<button class="list-group-item active">1.這是起始
<span class="badge">10</span>
</button>
<button class="list-group-item">2.這是第二條數據</button>
<button class="list-group-item">3.這是第三排信息</button>
<button class="list-group-item">4.這是末尾</button>
</div>
~~~
**設置項目被禁用**
~~~html
class="list-group-item disabled"
~~~
**情景類**
為列表中的條目添加情境類，默認樣式或鏈接列表都可以。還可以為列表中的條目設置` .active` 狀態。
~~~html
<li class="list-group-item list-group-item-success"> 3.這是第三排信息</li>
~~~
**定制內容**
列表組中的每個元素都可以是任何 HTML 內容，甚至是像下面的帶鏈接的列表組。
~~~html
<div class="list-group">
<a href="#" class="list-group-item active">
<h4>內容標題</h4>
<p class="list-group-item-text">這里是相關內容詳情！</p>
</a>
<a href="#" class="list-group-item">
<h4>內容標題</h4>
<p class="list-group-item-text">這里是相關內容詳情！</p>
</a>
<a href="#" class="list-group-item">
<h4>內容標題</h4>
<p class="list-group-item-text">這里是相關內容詳情！</p>
</a>
</div>
~~~
### 面板組件
面板組件就是一個存放內容的容器組件。
默認的` .panel `組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。
~~~html
<div class="panel panel-default">
<div class="panel-body">
這里是詳細內容區！
</div>
</div>
~~~
**帶標題容器的面板**
~~~html
<div class="panel panel-default">
<div class="panel-heading">
面板標題
</div>
<div class="panel-body">
這里是詳細內容區！
</div>
</div>
~~~
//也可以設置標題元素
~~~html
<div class="panel-heading">
<h3 class="panel-title">面板標題</h3>
</div>
~~~
**帶注腳的面板**
把按鈕或次要的文本放入 .panel-footer 容器內。
~~~html
<div class="panel-footer">
這里是底部
</div>
~~~
**情景效果：default、success、info、warning、danger、primary **
~~~html
<div class="panel panel-success">
~~~
**表格類面板**
~~~html
<div class="panel panel-default">
<div class="panel-heading">
表格標題
</div>
<div class="panel-body">
<p>這里是表格標題的詳細內容！</p>
</div>
<table class="table">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
~~~
**列表類面板**
~~~html
<div class="panel panel-default">
<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>
<li class="list-group-item">4.這里是第四個項目</li>
</ul>
</div>
~~~
### 響應式嵌入組件
根據被嵌入內容的外部容器的寬度，自動創建一個固定的比例，從而讓瀏覽器自動確定內容的尺寸，能夠在各種設備上縮放。
這些規則可以直接用于`<iframe>`、`<embed>`、`<video>`和`<object>`元素。
**16:9 響應式**
~~~html
<div class="embed-responsive embed-responsive-16by9">
<embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
</embed>
</div>
~~~
**4:3 響應式**
~~~html
<div class="embed-responsive embed-responsive-4by3">
<embed width="100%" height="100%"
src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
</embed>
</div>
~~~
