Bootstrap-v3-组件-面板

2024-02-14 08:45:58

面板

虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。

1、基本面板

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

<!-- 面板 -->
<!-- 基本面板 -->
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

2、带标题的面版

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。

为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。

<!-- 带有标题的面板 -->
<div class="panel panel-default">
  <!-- 通过panel-heading设置标题 -->
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    通过 .panel-heading 可以很简单地为面板加入一个标题容器。
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <!-- 通过panel-heading中的panel-title设置标题 -->
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
     Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

3、带脚注的面版

把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。

<!-- 带有脚注的面板 -->
<div class="panel panel-default">
  <div class="panel-body">
    这里是面板的内容，Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <div class="panel-footer">面板的脚注</div>
</div>

4、带情境效果的面版

像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版。

<!-- 带情境效果的面板 -->
<div class="panel panel-primary">
  <div class="panel-heading">
    <!-- 通过panel-heading中的panel-title设置标题 -->
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
     Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

5、带表格的面版

为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。如果是带有 .panel-body 的面板，我们为表格的上方添加一个边框，看上去有分隔效果。

5.1 带有panel-body的面板

<!-- 带表格的面板 -->
<div class="panel panel-info">
  <div class="panel-heading">面板标题</div>
  <div class="panel-body">
    <p>Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  </div>
  <!-- 表格 -->
  <table class="table">
    <thead>
      <tr>
        <th>工号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>联系电话</th>
        <th>电子邮箱</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1001</td>
        <td>王海涛</td>
        <td>20岁</td>
        <td>15220056699</td>
        <td>1205555@qq.com</td>
      </tr>
      <tr>
        <td>1002</td>
        <td>王海涛</td>
        <td>20岁</td>
        <td>15220056699</td>
        <td>1205555@qq.com</td>
      </tr>
      <tr>
        <td>1003</td>
        <td>王海涛</td>
        <td>20岁</td>
        <td>15220056699</td>
        <td>1205555@qq.com</td>
      </tr>
    </tbody>
  </table>
</div>

5.2 不带panel-body的面板

<!-- 带表格的面板 -->
<div class="panel panel-info">
  <div class="panel-heading">面板标题</div>
  <!-- 如果没有panel-body，表格会直接和标题连接起来，没有空隙 -->
<!--   <div class="panel-body">
    <p>Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  </div> -->
  <!-- 表格 -->
  <table class="table">
    <thead>
      <tr>
        <th>工号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>联系电话</th>
        <th>电子邮箱</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1001</td>
        <td>王海涛</td>
        <td>20岁</td>
        <td>15220056699</td>
        <td>1205555@qq.com</td>
      </tr>
      <tr>
        <td>1002</td>
        <td>王海涛</td>
        <td>20岁</td>
        <td>15220056699</td>
        <td>1205555@qq.com</td>
      </tr>
      <tr>
        <td>1003</td>
        <td>王海涛</td>
        <td>20岁</td>
        <td>15220056699</td>
        <td>1205555@qq.com</td>
      </tr>
    </tbody>
  </table>
</div>

6、带列表组的面板

可以简单地在任何面版中加入具有最大宽度的列表组。

<!-- 带有列表组的面板 -->
<div class="panel panel-primary">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
  </div>
  <!-- 列表组 -->
  <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>

码农公寓

面板