免費(fèi)AI編程助手
BUI 樣式規(guī)范
2020-08-12 18:09 更新
字體圖標(biāo)
樣式名
icon及icon-開(kāi)頭默認(rèn)自帶了字體圖標(biāo)的樣式, 如果需要自定義圖標(biāo)或引入第三方圖標(biāo),建議更改樣式名為icons-或其它命名.
布局樣式
| 布局 | 子元素 | 描述 |
|---|---|---|
| bui-box | span1 - span12 | 彈性布局 |
| bui-box-space | span1 - span12 | 留白彈性布局 |
| bui-box-vertical | span1 - span12 | 垂直方向 |
| bui-box-reverse | span1 - span12 | 反序排列 |
| bui-fluid | span1 - span12 | 流式布局 |
| bui-fluid-space | span1 - span12 | 留白流式布局 |
| bui-fluid-5 | span1 | 流式5列等比布局, 數(shù)字支持1-12 |
| bui-fluid-space-5 | span1 | 流式5列等比留白布局, 數(shù)字支持1-12 |
| bui-left | 左浮動(dòng) | |
| bui-right | 右浮動(dòng) | |
| bui-clear | 清除浮動(dòng) |
布局對(duì)齊
| 布局 | 子元素 | 描述 |
|---|---|---|
| bui-box-center | div | 塊元素水平垂直居中 |
| bui-box-align-center | div | 水平居中 |
| bui-box-align-left | div | 居左對(duì)齊 |
| bui-box-align-right | div | 居右對(duì)齊 |
| bui-box-align-middle | div | 垂直居中對(duì)齊 |
| bui-box-align-top | div | 頂部對(duì)齊 |
| bui-box-align-bottom | div | 底部對(duì)齊 |
| bui-box-align-justify | div | 兩端對(duì)齊 |
| bui-box-align-stretch | div | 子集高度拉伸等高 |
全局樣式-常用類(lèi)
| 樣式名 | 描述 |
|---|---|
| bui-btn- | 自定義按鈕,后面跟名字,自帶bui-btn樣式 |
| container-x | 左右間隙 |
| container-y | 上下間隙 |
| container-xy | 上下左右間隙 |
| active | 按鈕高亮顏色 |
| clearactive | 清除按鈕高亮,常用于表單 |
| inline | 內(nèi)聯(lián)元素 |
| round | 圓角 |
| noround | 沒(méi)有圓角 |
| ring | 圓 |
| large | 加大高度 |
| xlarge | 超大高度 |
| bui-reset | 按鈕樣式重置 |
| bui-show | 顯示塊元素 |
| bui-hide | 隱藏塊元素 |
全局樣式-顏色類(lèi)
| 樣式名 | 描述 |
|---|---|
| default | 默認(rèn)顏色 |
| primary | 頁(yè)面主顏色 |
| success | 一般是綠色 |
| warning | 一般是橘紅色 |
| danger | 列表的分組標(biāo)題 |
全局樣式-標(biāo)題類(lèi)
| 樣式名 | 描述 |
|---|---|
| page-title | 頁(yè)面標(biāo)題 |
| title | 文章標(biāo)題 |
| subtitle | 文章子標(biāo)題 |
| section-title | 章節(jié)標(biāo)題,常用于頁(yè)面的模塊劃分 |
| bui-btn-title | 列表的分組標(biāo)題 |
| item-title | 列表的多行標(biāo)題 |
| item-text | 列表的多行內(nèi)容 |
全局樣式-文本類(lèi)
| 樣式名 | 描述 |
|---|---|
| bui-align-left | 文本左對(duì)齊 |
| bui-align-right | 文本右對(duì)齊 |
| bui-align-center | 文本居中對(duì)齊 |
| bui-text-show | 文本顯示 |
| bui-text-hide | 文本超出點(diǎn)點(diǎn)點(diǎn) |
| bui-box-text-hide | 文本2行超出點(diǎn)點(diǎn)點(diǎn) |
| bui-text-clip | 文本超出截?cái)?/td> |
全局樣式-箭頭類(lèi)
| 樣式名 | 描述 |
|---|---|
| bui-arrow-left | 左邊箭頭,需要父級(jí)增加 positon:relative; |
| bui-arrow-right | 右邊箭頭,需要父級(jí)增加 positon:relative; |
| bui-arrow-up | 頂部箭頭,需要父級(jí)增加 positon:relative; |
| bui-arrow-down | 底部箭頭,需要父級(jí)增加 positon:relative; |
注意事項(xiàng)
active是控件的公共樣式,請(qǐng)通過(guò)父層的方式定義.bui-nav .active{},不要直接.active {};- BUI的樣式單位都需要以 rem 為單位, 也就是量到的px除以100 就能轉(zhuǎn)換成rem, 除了
1px不做轉(zhuǎn)換; 注意:.bui-nav .active{}也會(huì)修改到使用bui-nav的其它控件, 所以如果跟業(yè)務(wù)相關(guān),請(qǐng)直接加上自己的業(yè)務(wù)樣式進(jìn)行修改;
以上內(nèi)容是否對(duì)您有幫助：
更多建議：