样式规范

字体图标

图标内置样式

更多图标预览

样式名 icon 及 icon- 开头默认自带了字体图标的样式, 如果需要自定义图标或引入第三方图标,建议更改样式名为 icons- 或其它命名.

布局样式

布局子元素描述
bui-boxspan1 - span12弹性布局
bui-box-spacespan1 - span12留白弹性布局
bui-box-verticalspan1 - span12垂直方向
bui-box-reversespan1 - span12反序排列
bui-fluidspan1 - span12流式布局
bui-fluid-spacespan1 - span12留白流式布局
bui-fluid-5span1流式5列等比布局, 数字支持1-12
bui-fluid-space-5span1流式5列等比留白布局, 数字支持1-12
bui-left左浮动
bui-right右浮动
bui-clear清除浮动

布局对齐

布局子元素描述
bui-box-centerdiv块元素水平垂直居中
bui-box-align-centerdiv水平居中
bui-box-align-leftdiv居左对齐
bui-box-align-rightdiv居右对齐
bui-box-align-middlediv垂直居中对齐
bui-box-align-topdiv顶部对齐
bui-box-align-bottomdiv底部对齐
bui-box-align-justifydiv两端对齐
bui-box-align-stretchdiv子集高度拉伸等高

全局样式-常用类

样式名描述
bui-btn-自定义按钮,后面跟名字,自带bui-btn样式
container-x左右间隙
container-y上下间隙
container-xy上下左右间隙
active按钮高亮颜色
clearactive清除按钮高亮,常用于表单
inline内联元素
round圆角
noround没有圆角
ring圆
large加大高度
xlarge超大高度
bui-reset按钮样式重置
bui-show显示块元素
bui-hide隐藏块元素

全局样式-颜色类

样式名描述
default默认颜色
primary页面主颜色
success一般是绿色
warning一般是橘红色
danger列表的分组标题

全局样式-标题类

样式名描述
page-title页面标题
title文章标题
subtitle文章子标题
section-title章节标题,常用于页面的模块划分
bui-btn-title列表的分组标题
item-title列表的多行标题
item-text列表的多行内容

全局样式-文本类

样式名描述
bui-align-left文本左对齐
bui-align-right文本右对齐
bui-align-center文本居中对齐
bui-text-show文本显示
bui-text-hide文本超出点点点
bui-box-text-hide文本2行超出点点点
bui-text-clip文本超出截断

全局样式-箭头类

样式名描述
bui-arrow-left左边箭头,需要父级增加 positon:relative;
bui-arrow-right右边箭头,需要父级增加 positon:relative;
bui-arrow-up顶部箭头,需要父级增加 positon:relative;
bui-arrow-down底部箭头,需要父级增加 positon:relative;

注意事项

  • active 是控件的公共样式,请通过父层的方式定义 .bui-nav .active{} ,不要直接 .active {} ;
  • BUI的样式单位都需要以 rem 为单位, 也就是量到的px除以100 就能转换成rem, 除了1px 不做转换; 注意: .bui-nav .active{} 也会修改到使用bui-nav的其它控件, 所以如果跟业务相关,请直接加上自己的业务样式进行修改;