version 2.0
类名(class) 说明
栅格 / 布局
s-page-wrapper 非必须使用,各框架都有自己的固定宽度容器,使用各自的即可 (注:移动端的宽度750px)
is-flex 快速定义Flex布局容器
is-column flex子项目垂直布局
s-row block布局容器,后面子项目需要搭配 s-col,is-col-{x} 使用
s-row-flex Flex布局的容器,后面子项目需要搭配 s-col,is-col-{x} 使用
s-col 栅格列,跟着每个子项目
is-col-{x} 栅格的占位格数,可选值 0~24的整数,为 0 时,相当于display:none
is-col-1-5 24栅格下的5等分栅格布局
is-col-1-8 24栅格下的8等分栅格布局
has-space-{x} 栅格间距,单位 px,左右平分,可选值 1,2,3,5,7,8,10,15,20,25,30,35,40,45,50,55,60px
is-justify-{x} Flex 布局下的水平排列方式,可选值 start,end,center,around,between (注:跟着Flex布局的容器同级)
is-align-{x} Flex 布局下的垂直对齐方式,可选值 top,middle,bottom (注:跟着Flex布局的容器同级)
is-order-{x} 栅格顺序,数字越小越靠前,可选值 1-24 (注:Flex 布局模式下有效)
is-push-{x} 栅格向右移动格数,可选值 1-24
is-pull-{x} 栅格向左移动格数,可选值 1-24
is-push-{x} 栅格向右移动格数,可选值 1-24
宫格 / 布局
s-grids 宫格布局
s-grids-noborder 宫格布局,无边框
is-grid 宫格,配合百分比
is-grid-1-5 宫格百分比,1/5 宫格,1/2,1/3,1/4,1/5
按钮
s-btn 按钮容器
s-btn-flex 按钮容器,flex布局
is-btn 默认按钮
is-btn-md 大按钮,固定宽度
is-btn-lg 大按钮,铺满
has-bg-green 微信绿背景色按钮,可选值 green,red,blue
文本 / 排版
is-p 采用段落设置大小,颜色,粗细 16px
is-h1 采用h1的字体设置大小,颜色,粗细,可选值h1-h6
is-green 字体颜色,可选值 grey,green,red,white,black,blue
has-bg-green 背景颜色,可选值 grey,red,white,black,blue
is-size-14 字体大小,可选值 14,15,16,17,18
is-lh-1 行高倍数,可选值 1,12,15,2,25
is-bold 粗体,可选值 is-bold (700),is-light(300) is-normal
is-itatic 斜体
is-left 文本左对齐,可选值 left, center,right
is-oneline 一行文字超出长度省略,使用..代替
has-title-color 含有标题的颜色
has-content-color 含有正文的颜色
has-desc-color 含有描述的颜色
列表
s-list 定义list列表容器
s-list-title list介绍表头
is-item 列表项
is-item-line 列表项,贯穿线边框
has-right-icon 带有右箭头,跟着is-item(类)样式
s-list2 类支付宝样式,边框线只跟随主体内容,长配合has-bordertb 设置收含有顶部和底部
is-item2 列表项
is-list2-link 列表项是链接,含有箭头
工具类
has-bordera 含有border 1px边框,可选值 has-bordert, has-borderb, has-bordertb, has-borderl, has-borderf, has-border-radius
has-mgt-10 margin-top 10px间距,可选值 has-mgt-{x},has-mgb-{x},has-mgl-{x},has-mgr-{x},has-mg-{x}, has-mgtb-{x},has-mglr-{x},1,2,3,4,5,6,7,8,10,12,15,18,20,25,30,35,40,45,50,55,60
has-pdt-10 padding-top 10px间距,可选值 has-pdt-{x},has-pdb-{x},has-pdl-{x},has-pdr-{x},has-pd-{x}, has-pdtb-{x},has-pdlr-{x} ,1,2,3,4,5,6,7,8,10,12,15,18,20,25,30,35,40,45,50,55,60