在本教程中，我们将学习Bootstrap中的面板。

在Bootstrap中，当我们要将DOM放在一个盒子中时，我们使用面板。

简单面板

要创建面板，我们使用.panel类，并使用以下类对其进行样式设置。

• .panel-default这是默认面板
• .panel-primary这是主面板
• .panel-success这是成功面板
• .panel-info这是信息面板
• .panel-warning，用于警告面板
• .panel-danger这是用于危险面板

在面板内部，我们拥有.panel-body类，该类保存面板的主体。

<!-- default panel -->
<div class="panel panel-default">
  <div class="panel-body">
    <p>Some text in the body of the panel...</p>
  </div>
</div>

带标题面板

为了向面板添加标题，我们在.panel中使用了.panel-heading。

<!-- default panel -->
<div class="panel panel-default">
  <div class="panel-heading">
    <p>This is the heading</p>
  </div>
  <div class="panel-body">
    <p>Some text in the body of the panel...</p>
  </div>
</div>

面板标题

我们甚至可以将 .panel-title类添加到面板的标题。

<!-- success panel -->
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">This is the title</h3>
  </div>
  <div class="panel-body">
    <p>Some text in the body of the panel...</p>
  </div>
</div>

带页脚面板

要在面板中创建页脚，我们使用.panel-footer类。

<!-- success panel -->
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">This is the title</h3>
  </div>
  <div class="panel-body">
    <p>Some text in the body of the panel...</p>
  </div>
  <div class="panel-footer">
    This is the footer
  </div>
</div>

上下文替代

不同的面板类型。

<!-- success panel -->
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">This is the title</h3>
  </div>
  <div class="panel-body">
    <p>Some text in the body of the panel...</p>
  </div>
</div>

<!-- info panel -->
<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">This is the title</h3>
  </div>
  <div class="panel-body">
    <p>Some text in the body of the panel...</p>
  </div>
</div>

<!-- warning panel -->
<div class="panel panel-warning">
  <div class="panel-heading">
    <h3 class="panel-title">This is the title</h3>
  </div>
  <div class="panel-body">
    <p>Some text in the body of the panel...</p>
  </div>
</div>

<!-- danger panel -->
<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">This is the title</h3>
  </div>
  <div class="panel-body">
    <p>Some text in the body of the panel...</p>
  </div>
</div>

面板内的表格

在以下示例中，我们在面板内添加了一个表格。

如果不需要，可以删除.panel-body。

<!-- default panel -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Superheroes</h3>
  </div>
  <div class="panel-body">
    <p>Username of the superheroes...</p>
  </div>
  
  <div class="table-responsive">
    <table class="table">
      <tr>
        <th>#</th>
        <th>Username</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Superman</td>
      </tr>
      <tr>
        <td>2</td>
        <td>WonderWoman</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Batman</td>
      </tr>
    </table>
  </div>
</div>

带有列表组的面板

我们甚至可以在.panel中加入.list-group。

<!-- default panel -->
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Superheroes</h3>
  </div>
  <div class="panel-body">
    <p>Username of the superheroes...</p>
  </div>
  
  <ul class="list-group">
    <li class="list-group-item">WonderWoman</li>
    <li class="list-group-item">Superman</li>
    <li class="list-group-item">Batman</li>
  </ul>
</div>