Bootstrap 从3.0开始提供了面板组件，bootstrap并没有对他进行过多的修饰，只是简单的创建了面板的结构，如设置padding、border-radius(设置圆角)等。所以这个面板更像个盒子或容器，可以作为一个通用的组件使用。

Bootstrap为面板定义了三个部分：panel-heading(标题)、panel-footer(脚注)、panel-body(主体)。当然我们可以选择性的使用。

基本案例

默认的.panel所做的只是提供基本的边界和内部，来包含内容。

<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>

带标题的面版

用.panel-heading可以简单地加入一个标题容器。您也可以用<h1>-<h6>和.panel-title类加入预定义样式的标题。

<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>

带脚注的面版

把按钮或次要的文本放入.panel-footer。注意面版的脚注不会从带意义的替换中继承颜色，因为它不是在前面的内容。

<div class="panel panel-default"> <div class="panel-body"> Panel content </div> <div class="panel-footer">Panel footer</div> </div>

作为列表

<div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><h1>用户列表</h1></div>

        <!-- Table -->
        <table class="table">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>地址</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>北京</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Jacob</td>
              <td>Thornton</td>
              <td>上海</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Larry</td>
              <td>the Bird</td>
              <td>广州</td>
            </tr>
          </tbody>
        </table>
      </div>

商品展示

<div class="container">
	   <div class="row">
          <div class="col-md-3">
		     <div class="panel panel-default">
               <div class="panel-heading"><b>Lenovo/联想 A390</b></div>
               <div class="panel-body">
                   <div><img src="temp/T1bpJSXB4gXXcerjE._112726.jpg_180x180.jpg" class="img-responsive"/></div>
               </div>
		       <div class="panel-footer">
			       <p class="word-cat">主屏尺寸:4.0英寸</p>
				   <p class="word-cat">摄像头像素:500万</p>
				   <p class="word-cat">cpu核心数:双核</p>
			   </div>
              </div>		
           </div>
		   <div class="col-md-3">
		     <div class="panel panel-default">
               <div class="panel-heading"><b>Lenovo/联想 A760</b></div>
               <div class="panel-body">
                   <div><img src="temp/T1dN8OXtpeXXaZRW_b_122848.jpg_180x180.jpg" class="img-responsive"/></div>
               </div>
		       <div class="panel-footer">
				   <p class="word-cat">主屏尺寸:4.5英寸</p>
				   <p class="word-cat">摄像头像素:500万</p>
				   <p class="word-cat">cpu核心数:四核</p>
			   </div>
              </div>		
           </div>
		   <div class="col-md-3">
		     <div class="panel panel-default">
               <div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
               <div class="panel-body">
                   <div><img src="temp/T1pBlbXAtdXXbSZzM3_050543.jpg_180x180.jpg" class="img-responsive"/></div>
               </div>
		       <div class="panel-footer">Panel footer</div>
              </div>		
           </div>
		   <div class="col-md-3">
		     <div class="panel panel-default">
               <div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
               <div class="panel-body">
                   <div><img src="temp/T1u7iUXA4gXXXEcK79_102956.jpg_180x180.jpg" class="img-responsive"/></div>
               </div>
		       <div class="panel-footer">Panel footer</div>
              </div>		
           </div>
       </div>	
	</div>

响应式图片: 上面的图片加了 img-responsive类样式，这是bootstrap对响应式图片的处理。防止图片过大撑开面板。其原理是对图片的max-width:100%和height:auto;属性进行限制。