字體圖標(biāo)
圖標(biāo)內(nèi)置樣式
更多圖標(biāo)預(yù)覽
樣式名 icon 及 icon- 開頭默認自帶了字體圖標(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 |
默認顏色 |
| 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 |
文本超出點點點 |
| 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 就能轉(zhuǎn)換成rem, 除了
1px 不做轉(zhuǎn)換;
注意: .bui-nav .active{} 也會修改到使用bui-nav的其它控件, 所以如果跟業(yè)務(wù)相關(guān),請直接加上自己的業(yè)務(wù)樣式進行修改;
免費AI編程助手
更多建議：