容器（container）

<div class="be-container">...</div>

栅格系统（grid）

Be 栅格系统为二十四栏布局，没有内外边距，没有内外边距，没有内外边距！

按比例自动分配宽度

be-col

按内容自动分配宽度

be-col-auto 内容多，宽度自动撑大

be-col-auto

指定宽度

be-col-2

be-col-4

be-col-5

be-col-6

be-col-7

be-col-4

be-col-5

be-col-6

指定宽度 + 屏幕识别

be-col-24 be-col-md-12 be-col-lg-8

按钮（button）

be-btn（超链接）

表单（form）

普通表单

静态文本

静态文本内容

输入框

密码

下拉框

上传文件

多行文本

复选框

选项一

选项二

选项三

选项四

单选框

选项一

选项二

选项三

浮动标签

颜色（color）

命名规则：be-c-后缀值
后缀值：常用颜色

be-c-000 或 be-c-dark

be-c-111

be-c-222

be-c-333

be-c-444

be-c-555

be-c-666

be-c-777

be-c-888

be-c-999

be-c-aaa

be-c-bbb

be-c-ccc

be-c-ddd

be-c-eee

be-c-fff 或 be-c-white

显示方式（display）

命名规则：be-d-后缀值
后缀值：常用显示方式
后缀值列表：none, inline，block, inline-block, flex

<div class="be-d-flex">...</div>

be-flex-1

be-flex-0

浮动（float）

be-fl：左浮动，float: left
be-fr：右浮动，float: right
be-fc：清除浮动

be-fl，浮动告左，对应样式： float: left;

be-fr，浮动告右，对应样式： float: right;

清除浮动：be-fc，在浮动元素的父级元素上添加。

文字大小（font-size）

命名规则：be-fs-后缀值
后缀值：rem(根元素的字体大小) × 100，即10表示0.1rem，125表示1.25rem
后缀值列表：50, 60, 70, 75, 80, 90, 100, 125, 150, 175, 200, 250, 300, 400

be-fs-50

be-fs-75

be-fs-100

be-fs-125

be-fs-200

be-fs-400

文字样式（font-style）

命名规则：be-fs-后缀值
后缀值列表：normal, italic

be-fs-normal

be-fs-italic

文字加粗（font-weight）

命名规则：be-fw-后缀值
后缀值列表：normal, bold, bolder, light, lighter

be-fw-normal

be-fw-bold

be-fw-bolder

be-fw-light

be-fw-lighter

行高（line-height）

命名规则：be-lh-后缀值
后缀值：rem(根元素的字体大小) × 100，即10表示0.1rem，125表示1.25rem
后缀值列表：100, 125, 150, 175, 200, 250, 300, 400

be-lh-100

be-lh-150

be-lh-200

be-lh-400

边距（spacing）

后缀值：rem(根元素的字体大小) × 100，即10表示0.1rem，125表示1.25rem
后缀值列表：10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100, 125, 150, 175, 200, 250, 300, 400

内边距（padding）

内边距采用 "p" 缩写，l, r, t, b 表示左右上下， x, y 表示横向和缀向

命名规则：be-p[l,r,t,b,x,y]-后缀值
be-p-*：四周内边距：padding
be-pl-*：左侧内边距：padding-left
be-pr-*：右侧内边距：padding-right
be-px-*：横向内边距：padding-left + padding-right
be-pt-*：顶部内边距：padding-top
be-pb-*：底部内边距：padding-bottom
be-py-*：纵向内边距：padding-top + padding-bottom

be-p-10 相当于：padding: 0.1rem

be-p-25 相当于：padding: 0.25rem

be-p-100 相当于：padding: 1rem

be-p-125 相当于：padding: 1.25rem

be-p-200 相当于：padding: 2rem

be-pl-125 相当于：padding-left: 1.25rem
be-pl-* 其中 * 支持所有后缀值,

be-px-125 相当于：padding-left: 1.25rem; padding-right: 1.25rem
be-px-* 其中 * 支持所有后缀值,

外边距（margin）

外边距除了采用 "m" 缩写，其它属性与用法与内边距完全一致。

命名规则：be-m[l,r,t,b,x,y]-后缀值
be-m-*：四周内边距：margin
be-ml-*：左侧内边距：margin-left
be-mr-*：右侧内边距：margin-right
be-mx-*：横向内边距：margin-left + margin-right
be-mt-*：顶部内边距：margin-top
be-mb-*：底部内边距：margin-bottom
be-my-*：纵向内边距：margin-top + margin-bottom

定位（position）

父容器

命名规则：be-p-后缀值
后缀值：对齐方式
后缀值列表：absolute, fixed, relative, static, sticky

子容器 left 定位

命名规则：be-l-后缀值
后缀值：百分比值
后缀值列表：0, 50, 100

子容器 right 定位

命名规则：be-r-后缀值
后缀值：百分比值
后缀值列表：0, 50, 100

子容器 top 定位

命名规则：be-t-后缀值
后缀值：百分比值
后缀值列表：0, 50, 100

子容器 bottom 定位

命名规则：be-b-后缀值
后缀值：百分比值
后缀值列表：0, 50, 100

位置转换（transform: translate）

命名规则：be-t-translate-后缀值
后缀值列表：middle, x-middle, y-middle
be-t-translate-middle：transform: translate(-50%, -50%)
be-t-translate-x-middle：transform: translateX(-50%)
be-t-translate-y-middle：transform: translateY(-50%)

文本辅助（text）

命名规则：be-t-后缀值
be-t-ellipsis：文本溢出时省略号
be-t-break：强制换行

be-t-ellipsis：longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong text

be-t-break：longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong text

文本对齐（text-align）

命名规则：be-ta-后缀值
后缀值：对齐方式

be-ta-left

be-ta-center

be-ta-right

重直对齐（vertical-align）

命名规则：be-va-后缀值
后缀值：对齐方式

be-va-baseline be-va-top be-va-middle be-va-bottom be-va-text-top be-va-text-bottom

文本装饰（text-decoration）

命名规则：be-td-后缀值
后缀值列表：underline, line-through, none

be-td-underline：Demo Text

be-td-line-through：Demo Text

be-td-none：Demo Text

文本转换（text-transform）

命名规则：be-tt-后缀值
后缀值列表：lowercase, uppercase, capitalize, none

be-tt-lowercase：Demo Text

be-tt-uppercase：demo text

be-tt-capitalize：demo text

be-tt-none：demo text

文本选择（user-select）

命名规则：be-us-后缀值
后缀值列表：all, auto, none

be-us-all：自动选中所有文本内容

be-us-auto：用户控制选中的文本

be-us-none：禁止选中文本

宽度（width）

宽度采用 "w" 缩写

命名规则：be-w-百分比，百分比取值范围：1~100

be-w-67，宽度 67%

be-w-100，宽度 100%