基础 完整的面板

基础

  • 一个可以整齐的收纳起你的页面组件的 “盒子”，默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。
实例
基本面板 
            
<div class="panel">
  <div class="panel-body">
    ...
  </div>
</div>

完整的面板

  • 通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1~6> 标签，添加一个预定义样式的标题。
    通过 .ph-add-ons 容器则可以为标题再添加一些组件，满足UE或UI的设计需要。
    把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。
实例

面板标题

组件位置
基本面板
面板脚注 
            
<div class="panel">
  <div class="panel-heading">
    <h1 class="panel-title">...</h1>
    <div class="ph-add-ons">...</div>
  </div>
  <div class="panel-body">
    ...
  </div>
  <div class="panel-footer">
    ...
  </div>
</div>
  • 像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版。
实例
.info-panel

面板标题

基本面板
面板脚注
.success-panel

面板标题

基本面板
面板脚注
.tips-panel

面板标题

基本面板
面板脚注
.warning-panel

面板标题

基本面板
面板脚注
.danger-panel

面板标题

基本面板
面板脚注 
            
<div class="panel ( info / success / tips / warning / danger )-panel">
</div>
  • 其他组件和面板组件的组合类型有很多（面板组件除了 .panel 这一层，其他的部件都是可有可无的，只是为了页面的规范化，而将这些部件进行一定量的定制化）。
    以下是一个完整的页面：
实例

Form Panel Example

表单居中 表单居中的展现需要结合栅格工具

T+
天
返回

Table Panel Example（此处应有副标题）

创建时间 业务类型 商品名称 订单号 对方账号 余额 收入 支出 操作
2015-05-25 10:25:36 交易 Item ZERO TJZT201505200025 liang1126 158,026.00 3,252.00 288.00
2015-05-25 10:25:36 交易 Item TWO TJZT201505200025 jingdong 158,026.00 3,252.00 288.00
2015-05-25 10:25:36 交易 Item ONE TJZT201501548025 liang1126 158,026.00 3,252.00 288.00