一般情況下可以把面板理解為一個區(qū)域，在使用面板的時候，都會在panel-body放置需要的內容，可能是圖片、表格或者列表等。來看看面板中嵌套表格和列表組的一個效果。首先來看嵌套表格的效果：
<div class="panel panel-default">
<div class="panel-heading">圖解CSS3</div>
<div class="panel-body">
<p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性
</p>
<table class="table table-bordered">
<thead>
<tr>
<th>＃</th>
<th>我的書</th>
<th>發(fā)布時間</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>《圖解CSS3》</td>
<td>2014-07-10</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer">作者：大漠</div>
</div>
運行效果如下：
優(yōu)化代碼：
在實際應用運中，你或許希望表格和面板邊緣不需要有任何的間距。但由于panel-body設置了一個padding：15px的值，為了實現(xiàn)這樣的效果。我們在實際使用的時候需要把table提取到panel-body外面：
<div class="panel panel-default">
<div class="panel-heading">圖解CSS3</div>
<div class="panel-body">…</div>
<table class="table table-bordered">…</table>
<div class="panel-footer">作者：大漠</div>
</div>
運行效果如下：
這樣的效果是不是完美多了。大家可能會問，前面介紹表格的時候table-bordered明明有邊框，按理說這里應該會出現(xiàn)邊框重疊效果才對，怎么沒有呢？其實原本是有邊框重疊的，只不過在面板中對表格又做了一次優(yōu)化。對應的代碼是bootstrap.css文件中第5054行～第5172行。
我來試試：
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報