Bootstrap-v3-组件-面板

2021-09-28 16:31:46 阅读：238 来源： 互联网

标签：ac Cras Bootstrap vulputate v3 组件面板 odio panel

面板

虽然不总是必须，但是某些时候你可能需要将某些 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>

标签：ac,Cras,Bootstrap,vulputate,v3,组件,面板,odio,panel
来源： https://www.cnblogs.com/AnnLing/p/15348549.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9