普通面板：

<div class="col-md-6">
	 <div class="panel panel-default">
		  <div class="panel-heading">Panel header</div>
			   <div class="panel-body">
				    <p> 內建元件-第一個測試面板</p>
					<p> 內建元件-第一個測試面板</p>
					<p> 內建元件-第一個測試面板</p>
					<p> 內建元件-第一個測試面板</p>
					<p> 內建元件-第一個測試面板</p>
					<p> 內建元件-第一個測試面板</p>
			   </div>
		  <div class="panel-footer">Panel-footer</div>
	 </div>
</div>
 

效果圖：

另一種主題的面板：

<div class="col-md-6">
	<div class="panel panel-primary">
		 <div class="panel-heading">Panel header</div>
			  <div class="panel-body">
				   <p> 內建元件-第一個測試面板</p>
				   <p> 內建元件-第一個測試面板</p>
				   <p> 內建元件-第一個測試面板</p>
				   <p> 內建元件-第一個測試面板</p>
				   <p> 內建元件-第一個測試面板</p>
				   <p> 內建元件-第一個測試面板</p>
			  </div>
		<div class="panel-footer">Panel-footer</div>
	</div>
</div>
 

效果圖：

帶表格的面板：

<div class="col-md-6">
 <div class="panel panel-success">
  <div class="panel-heading">使用者資訊類表</div>
   <div class="panel-body">
	<table class="table">
	  <thead>
	   <tr>
		 <th>使用者姓名</th>
		 <th>性別</th>
		 <th>年齡</th>
		 <th>聯絡方式</th>
		 <th>地址</th>
	   </tr>
	  </thead>
	  <tbody>
	   <tr>
		<td>tom</td>
		<td>男</td>
		<td>20</td>
		<td>*****</td>
		<td>廣西</td>
	   </tr>
	   <tr>
		<td>tom</td>
		<td>男</td>
		<td>20</td>
		<td>*****</td>
		<td>廣西</td>
	   </tr>
	   <tr>
		<td>tom</td>
		<td>男</td>
		<td>20</td>
		<td>*****</td>
		<td>廣西</td>
	   </tr>
	  </tbody>
	 </table>
   <div class="panel-footer">Panel-footer</div>
  </div>
 </div>
</div>
 

效果圖：

通知面板：

<div class="col-md-6">
 <div class="panel panel-danger">
  <div class="panel-heading">通知列表</div>
   <div class="panel-body">
	<div class="list-group">
	 <ul class="list-group">
	  <li class="list-group-item">入學通知</li>
	  <li class="list-group-item">上課通知</li>
	  <li class="list-group-item">作業通知</li>
	  <li class="list-group-item">畢業通知</li>
	 </ul>
	</div>
   <div class="panel-footer">Panel-footer</div>
  </div>
 </div>
</div>

效果圖：