### 列表组组件
列表组组件用于显示一组列表的组件。
~~~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>
~~~
