Bootstrap教程 面板(Panels)

官方金沙娱乐赌场网站_赌博娱乐注册送18现金,要从机关事业单位做起,推行垃圾强制分类制度。,还有疑问,询问请到,班牙克拉克斯足球学校深造,2013年加盟葡萄牙马夫拉俱乐部。2015年转会加盟洛里什俱乐部,代表洛里什梯队在葡萄牙全国青年

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

基本实例

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

实例:

Basic panel example
  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 类的标题标签内。

Panel heading without title
Panel content

Panel title

Panel content
  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 容器内。注意面版的脚注不会从情境效果中继承颜色,因为他们并不是主要内容。

实例:

Panel content
  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 的面板,我们为表格的上方添加一个边框,看上去有分隔效果。
实例:

面板标题

这是一个基本的面板
产品 价格
产品 A 200
产品 B 400
面板标题
产品 价格
产品 A 200
产品 B 400
  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>

带列表组的面版

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

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
    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>

    发布日期:

    所属分类: BootStrap 标签: