響應式前端架構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>
           

效果圖：