响应式前端框架Bootstrap系列（15）面板

面板组件用于把 DOM 组件插入到一个盒子中，比如组件表格或者列表组。面板的主要界面效果用于如超市的物价面板、动车进出站实时信息面板等。有关面板的样式有以下几种：

.panel .panel-default：默认面板格式。
.panel-primary：面板前景色
.panel-heading：面板头部
.panel-title：面板头部标题
.panel-body：面板主体内容，一般为文本
.panel-footer：面板脚注，不受前景色影响

普通面板默认界面，演示代码：

<p>默认面板格式</p>
<div class="panel panel-default panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">面板标题</h3>
	</div>
	<div class="panel-body">
		内容
	</div>
	<div class="panel-footer">
		面板脚注
	</div>
</div>

效果图：

带表格的面板，演示代码：

<p>带表格面板格式</p>
<div class="panel panel-default panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">面板标题</h3>
	</div>
	<div class="panel-body">
		家乐福超市商品价格一览表
	</div>
	<table class="table">
		<th>产品</th>
		<th>价格 </th>
		<tr>
			<td>产品 A</td>
			<td>200</td>
		</tr>
		<tr>
			<td>产品 B</td>
			<td>400</td>
		</tr>
	</table>
	<div class="panel-footer">
		面板脚注
	</div>
</div>

效果图：

带列表组的面板，演示代码：

<p>带列表组面板格式</p>
<div class="panel panel-default panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">家乐福超市 • 今日优惠</h3>
	</div>
	<!--<div class="panel-body">
		家乐福超市今日优惠
	</div>-->
	<ul class="list-group">
		<li class="list-group-item">
			<div class="row">
				<div class="col-sm-3">西红柿</div>
				<div class="col-sm-3">今日现价：1.5元/斤</div>
				<div class="col-sm-3">昨日价格：2.0元/斤</div>
				<div class="col-sm-3">折扣：7.5折</div>
			</div>
		</li>
		<li class="list-group-item">
			<div class="row">
				<div class="col-sm-3">白菜</div>
				<div class="col-sm-3">今日现价：1.5元/斤</div>
				<div class="col-sm-3">昨日价格：2.0元/斤</div>
				<div class="col-sm-3">折扣：7.5折</div>
			</div>
		</li>
		<li class="list-group-item">
			<div class="row">
				<div class="col-sm-3">空心菜</div>
				<div class="col-sm-3">今日现价：1.5元/斤</div>
				<div class="col-sm-3">昨日价格：2.0元/斤</div>
				<div class="col-sm-3">折扣：7.5折</div>
			</div>
		</li>
		<li class="list-group-item">
			<div class="row">
				<div class="col-sm-3">弥核桃</div>
				<div class="col-sm-3">今日现价：1.5元/斤</div>
				<div class="col-sm-3">昨日价格：2.0元/斤</div>
				<div class="col-sm-3">折扣：7.5折</div>
			</div>
		</li>
	</ul>
	<div class="panel-footer">
		面板脚注
	</div>
</div>

效果图：