当前位置:首页 > BootStrap > 正文内容
九月19日

时间:2016-09-19 20:31

Bootstrap教程 面板(Panels)

0
分类:BootStrap | 评论:0人 | 浏览:99次   

面板虽然不是必须的,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况,可以试试面板组件。创建一个基本的面板,只需要向 <div> 元素添加 class .panel class .panel-default 即可,如下面的实例所示:

基本实例

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

实例:

  1.  <div class="panel panel-default">
  2.   <div class="panel-body">
  3.     Basic panel example
  4.   </div>
  5. </div>

带标题的面版

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签,添加一个预定义样式的标题。

实例:

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

  1. <div class="panel panel-default">
  2.   <div class="panel-heading">Panel heading without title</div>
  3.   <div class="panel-body">
  4.     Panel content
  5.   </div>
  6. </div>
  7. 
    
  8. <div class="panel panel-default">
  9.   <div class="panel-heading">
  10.     <h3 class="panel-title">Panel title</h3>
  11.   </div>
  12.   <div class="panel-body">
  13.     Panel content
  14.   </div>
  15. </div>

h4 class=”text-primary”> 带脚注的面版<

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

  1. <div class="panel panel-default">
  2.   <div class="panel-body">
  3.     Panel content
  4.   </div>
  5.   <div class="panel-footer">Panel footer</div>
  6. </div>

情境效果

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

  1. <div class="panel panel-primary">Panel content</div>
  2. <div class="panel panel-success">Panel content</div>
  3. <div class="panel panel-info">Panel content</div>
  4. <div class="panel panel-warning">Panel content</div>
  5. <div class="panel panel-danger">Panel content</div>

带表格的面版

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

  1. <div class="panel panel-default">
  2.   <!-- Default panel contents -->
  3.   <div class="panel-heading">Panel heading</div>
  4.   <div class="panel-body">
  5.     <p>...</p>
  6.   </div>
  7. 
    
  8.   <!-- Table -->
  9.   <table class="table">
  10.     ...
  11.   </table>
  12. </div>

如果没有 .panel-body ,面版标题会和表格连接起来,没有空隙。

  1. <div class="panel panel-default">
  2.   <!-- Default panel contents -->
  3.   <div class="panel-heading">Panel heading</div>
  4. 
    
  5.   <!-- Table -->
  6.   <table class="table">
  7.     ...
  8.   </table>
  9. </div>

带列表组的面版

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

  1. <div class="panel panel-default">
  2.   <!-- Default panel contents -->
  3.   <div class="panel-heading">Panel heading</div>
  4.   <div class="panel-body">
  5.     <p>...</p>
  6.   </div>
  7. 
    
  8.   <!-- List group -->
  9.   <ul class="list-group">
  10.     <li class="list-group-item">Cras justo odio</li>
  11.     <li class="list-group-item">Dapibus ac facilisis in</li>
  12.     <li class="list-group-item">Morbi leo risus</li>
  13.     <li class="list-group-item">Porta ac consectetur ac</li>
  14.     <li class="list-group-item">Vestibulum at eros</li>
  15.   </ul>
  16. </div>

来源:Dashu.info(微信号/QQ号:43318553),转载请注明出处,谢谢!

  • 评论:(0)
  • 有图有真相

站内搜索

css.php

无觅相关文章插件,快速提升流量