雖然不總是必須，但是某些時候你可能需要將某些 DOM 內(nèi)容放到一個盒子里。對于這種情況，可以試試面板組件。

基本實例

默認的 .panel 組件所做的只是設(shè)置基本的邊框（border）和內(nèi)補（padding）來包含內(nèi)容。

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

帶標題的面版

通過 .panel-heading 可以很簡單地為面板加入一個標題容器。你也可以通過添加設(shè)置了 .panel-title 類的 <h1>-<h6> 標簽，添加一個預(yù)定義樣式的標題。

為了給鏈接設(shè)置合適的顏色，務(wù)必將鏈接放到帶有 .panel-title 類的標題標簽內(nèi)。

<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 容器內(nèi)。注意面版的腳注不會從情境效果中繼承顏色，因為他們并不是主要內(nèi)容。

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

情境效果

像其他組件一樣，可以簡單地通過加入有情境效果的狀態(tài)類，給特定的內(nèi)容使用更針對特定情境的面版。

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

帶表格的面版

為面板中不需要邊框的表格添加 .table 類，是整個面板看上去更像是一個整體設(shè)計。如果是帶有 .panel-body 的面板，我們?yōu)楸砀竦纳戏教砑右粋€邊框，看上去有分隔效果。

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

如果沒有 .panel-body ，面版標題會和表格連接起來，沒有空隙。

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

帶列表組的面版

可以簡單地在任何面版中加入具有最大寬度的列表組。

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>