字體圖標(biāo)
圖標(biāo)內(nèi)置樣式
更多圖標(biāo)預(yù)覽
樣式名 icon
及 icon-
開頭默認(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 |
|
左浮動 |
bui-right |
|
右浮動 |
bui-clear |
|
清除浮動 |
布局對齊
布局 |
子元素 |
描述 |
bui-box-center |
div |
塊元素水平垂直居中 |
bui-box-align-center |
div |
水平居中 |
bui-box-align-left |
div |
居左對齊 |
bui-box-align-right |
div |
居右對齊 |
bui-box-align-middle |
div |
垂直居中對齊 |
bui-box-align-top |
div |
頂部對齊 |
bui-box-align-bottom |
div |
底部對齊 |
bui-box-align-justify |
div |
兩端對齊 |
bui-box-align-stretch |
div |
子集高度拉伸等高 |
全局樣式-常用類
樣式名 |
描述 |
bui-btn- |
自定義按鈕,后面跟名字,自帶bui-btn樣式 |
container-x |
左右間隙 |
container-y |
上下間隙 |
container-xy |
上下左右間隙 |
active |
按鈕高亮顏色 |
clearactive |
清除按鈕高亮,常用于表單 |
inline |
內(nèi)聯(lián)元素 |
round |
圓角 |
noround |
沒有圓角 |
ring |
圓 |
large |
加大高度 |
xlarge |
超大高度 |
bui-reset |
按鈕樣式重置 |
bui-show |
顯示塊元素 |
bui-hide |
隱藏塊元素 |
全局樣式-顏色類
樣式名 |
描述 |
default |
默認(rèn)顏色 |
primary |
頁面主顏色 |
success |
一般是綠色 |
warning |
一般是橘紅色 |
danger |
列表的分組標(biāo)題 |
全局樣式-標(biāo)題類
樣式名 |
描述 |
page-title |
頁面標(biāo)題 |
title |
文章標(biāo)題 |
subtitle |
文章子標(biāo)題 |
section-title |
章節(jié)標(biāo)題,常用于頁面的模塊劃分 |
bui-btn-title |
列表的分組標(biāo)題 |
item-title |
列表的多行標(biāo)題 |
item-text |
列表的多行內(nèi)容 |
全局樣式-文本類
樣式名 |
描述 |
bui-align-left |
文本左對齊 |
bui-align-right |
文本右對齊 |
bui-align-center |
文本居中對齊 |
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>
|
全局樣式-箭頭類
樣式名 |
描述 |
bui-arrow-left |
左邊箭頭,需要父級增加 positon:relative; |
bui-arrow-right |
右邊箭頭,需要父級增加 positon:relative; |
bui-arrow-up |
頂部箭頭,需要父級增加 positon:relative; |
bui-arrow-down |
底部箭頭,需要父級增加 positon:relative; |
注意事項(xiàng)
active
是控件的公共樣式,請通過父層的方式定義 .bui-nav .active{}
,不要直接 .active {}
;
- BUI的樣式單位都需要以 rem 為單位, 也就是量到的px除以100 就能轉(zhuǎn)換成rem, 除了
1px
不做轉(zhuǎn)換;
注意: .bui-nav .active{}
也會修改到使用bui-nav的其它控件, 所以如果跟業(yè)務(wù)相關(guān),請直接加上自己的業(yè)務(wù)樣式進(jìn)行修改;
更多建議: