version 2.0 panel
完整panel示例
此处插入内容
ibox-title 分类
热卖榜
标题
标题标题标题标题标题标题标题标题标标题标题标题标题标题标题标题标题标
北京航天福道高技术股份有限公司 企业号:600022
标题标题标题标题标题标题标题标题标
副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标题副标
标题标题
option1
  • option1
  • option2
  • option3
  • option4
  • option5
选择模板
  • 全部
  • 待买家支付
  • 交易中
  • 待确认
  • 已完成
  • 待买家评价
  • 待买家评价
  • 待买家评价
  • 11待买家评价
概况列表6
  • 标题1
  • 标题2
  • 标题3
ibox-content 分类

内容区单独使用时:可引用.border0以消除border-top

如需定高处理,可引用.ibox-height312

ibox-footer 分类
标题
此处插入内容
标题
此处插入内容
标题
此处插入内容
使用说明

设计说明

panel外盒子为.ibox,其中.ibox主要分为三大模块:头部模块(.ibox-title)、content模块(.ibox-content)和footer模块(.ibox-footer)。

三大模块互不影响,可根据开发需要增减模块。

1. 头部模块又分为标题模块(h5)、副标题(span.sub-title)、label和工具模块(.ibox-tools),标题模块使用h5标签,工具模块中可放按钮类内容。适配处理为折行。

2. content模块为内容区域,即panel的主体部分。内容区单独使用时:可引用.border0以消除border-top;如需定高处理,可引用.ibox-height312或使用行内样式

3. footer模块主要为按钮区,使用内联元素span划分按钮区域,可放置1~3个按钮。

开发规范

使用时,需嵌套到栅格中,以满足适配要求。

使用时,主体结构不能修改,即模块必须为.ibox包裹下的各个子模块(头,内容,尾),但可根据设计需要增删子模块。

1. 头部模块中的标题模块、副标题、label和工具模块可根据需要移除或保留。

2. content模块的内容又可根据需要增加栅格以划分区域,也可插入其他组件。

panel dom结构

<div class="ibox"> <div class="ibox-title"> <h5>标题</h5> <div class="ibox-tools"> <button class="btn btn-primary btn-outline">工具按钮</button> </div> </div> <div class="ibox-content"> 此处插入内容 </div> <div class="ibox-footer clearfix"> <span class="ibox-footer-btn">按钮1</span> <span class="ibox-footer-btn">按钮2</span> </div> </div>