純css面板外掛,自適應,多樣式
阿新 • • 發佈:2018-12-10
最近在做公司的系統後臺,用的bootstrap,在設計佈局的時候不喜歡他的面板,所以自己寫了這個面板外掛,分享給大家
先上預覽圖:
預設樣式:
綠色:
黃色:
藍:
紅:
使用方法:
引用MoUi.css
HTML中使用為:
<div class="mo-group mo-group-default mo-group-radius"> <div class="mo-group-title mo-group-title-left mo-group-title-sm"> <span class="fa fa-map-marker"></span> 標題 </div> <div class="mo-group-body"> ... </div> </div>
圓角樣式
mo-group-radius
面板顏色樣式為:
預設:mo-group-default
綠色:mo-group-success
藍色:mo-group-primary
黃色:mo-group-warning
紅色:mo-group-danger
標題浮動:
左浮動:mo-group-title-left
其他後續補充。。。
標題寬度:
考慮到標題的實際長度問題,設定百分比寬度在不同的解析度中會導致太寬或者太窄的問題,很不好看,所以我給標題設定了幾個固定寬度,基本能適用於所有場景了。
mo-group-title-xs 寬度100px
mo-group-title-sm 寬度200px
mo-group-title-md 寬度300px
mo-group-title-lg 寬度500px
原始碼下載:點選