面板（Panels）

优质

小牛编辑

123浏览

2023-12-01

本章将讨论Bootstrap面板。当您想要将DOM组件放在一个盒子中时，可以使用面板组件。要获得基本面板，只需将类.panel添加到“div”元素即可。还要将class .panel-default添加到此元素，如以下示例所示 -

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

带标题的面板

有两种方法可以添加面板标题 -

使用.panel-heading类可以轻松地向面板添加标题容器。
使用带有.panel-title类的任何<h1> - <h6>添加预先设置的标题。

以下示例演示了两种方式 -

<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 With title
      </h3>
   </div>
   <div class = "panel-body">
      Panel content
   </div>
</div>

面板与页脚

您可以通过在包含类.panel-footer的<div>中包装按钮或辅助文本来向页面添加页脚。以下示例演示了这一点。

<div class = "panel panel-default">
   <div class = "panel-body">
      This is a Basic panel
   </div>
   <div class = "panel-footer">Panel footer</div>
</div>

使用上下文变体时，面板页脚不会继承颜色和边框，因为它们不在前景中。

小组背景替代方案

使用上下文状态类（例如， panel-primary, panel-success, panel-info, panel-warning, panel-danger ）使面板对特定上下文更有意义。

<div class = "panel panel-primary">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>
<div class = "panel panel-success">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>
<div class = "panel panel-info">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>
<div class = "panel panel-warning">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>
<div class = "panel panel-danger">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   <div class = "panel-body">
      This is a Basic panel
   </div>
</div>

面板与表

要在面板中获取非边界表，请使用面板中的类.table 。假设有一个包含.panel-body的“div”，我们在表的顶部添加一个额外的边框以便分离。如果没有包含.panel-body “div”，则组件会从面板标题移动到表而不会中断。

以下示例演示了这一点 -

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   <div class = "panel-body">
      This is a Basic panel
   </div>
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>
<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
</div>

带列表组的面板

您可以在任何面板中包含列表组。通过将类.panel添加到“div”元素来创建面板。还要为此元素添加类.panel-default 。现在，在此面板中包括您的列表组。您可以从章节列表组中学习创建列表组。

<div class = "panel panel-default">
   <div class ="panel-heading">Panel heading</div>
   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>
   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>
</div>