BootStrap之面板panel

普通面板：

<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>

 

效果图：