mui組件通用CSS類

color(顏色)

mui中組件以iOS 7爲基礎，補充部分Android特有控件，顏色值主要有如下五種：

1 2 3 4 5

primary => #007aff; //藍色(blue) success => #4cd964; //綠色(green) warning => #f0ad4e; //黃色(yellow) danger  => #dd524d; //紅色(red) royal   => #8a6de9; //紫色(purple)

注：上述primary等顏色值關鍵詞在引用的時候能夠替換成對應的顏色單詞，如.mui-btn-primary等效於.mui-btn-blue;

badge（數字角標）：默認背景爲灰色，另外mui內置了藍色（primary/blue）、綠色(success/green)、黃色(warning/yellow)、紅色(danger/red)、紫色（royal/purple）五種顏色，經過給button或者a標籤添加.mui-badge-* 類添加背景顏色。如：

1 2 3 4 5 6

<span class="mui-badge">1</span> <span class="mui-badge mui-badge-primary">2</span> <span class="mui-badge mui-badge-success">3</span> <span class="mui-badge mui-badge-warning">4</span> <span class="mui-badge mui-badge-danger">5</span> <span class="mui-badge mui-badge-royal">6</span>

button（按鈕）：默認背景爲白色，另外mui內置了藍色（primary/blue）、綠色(success/green)、黃色(warning/yellow)、紅色(danger/red)、紫色（royal/purple）五種顏色，經過給button或者a標籤添加.mui-btn-* 類添加背景顏色。

1 2 3 4 5 6

<button type="button" class="mui-btn">默認</button> <button type="button" class="mui-btn mui-btn-primary">藍色</button> <button type="button" class="mui-btn mui-btn-success">綠色</button> <button type="button" class="mui-btn mui-btn-warning">黃色</button> <button type="button" class="mui-btn mui-btn-danger">紅色</button> <button type="button" class="mui-btn mui-btn-royal">紫色</button>

switch(開關)：默認值爲綠色，可選顏色爲藍色，添加.mui-switch-blue類便可。

1 2 3 4 5 6

<div class="mui-switch mui-active"> <div class="mui-switch-handle"></div> </div> <div class="mui-switch mui-switch-blue mui-active"> <div class="mui-switch-handle"></div> </div>

任意元素：能夠給任意元素添加.mui-bg-*類添加背景顏色，可選參數爲primary/positive/negative。

1 2 3

<div class="mui-bg-primary">我是藍色背景</div> <div class="mui-bg-positive">我是綠色背景</div> <div class="mui-bg-negative">我是紅色背景</div>

文字(font)

文字位置： 能夠給文字添加 .mui-text-left、.mui-text-center、.mui-text-right設置文字位置。

1 2 3

<div class="mui-text-left">我在左邊</div> <div class="mui-text-center">我在中間</div> <div class="mui-text-right">我在右邊</div>

溢出隱藏：當文字內容超過一行或者多行時，溢出文本用省略號代替。

顯示單行：

1	<p class="mui-ellipsis">我在一行內，當我超出了會顯示省略號。我在一行內，當我超出了會顯示省略號。我在一行內，當我超出了會顯示省略號。我在一行內，當我超出了會顯示省略號。</p>

顯示兩行：

1	<p class="mui-ellipsis-2">我在兩行內，當我超出了會顯示省略號。我在兩行內，當我超出了會顯示省略號。我在兩行內，當我超出了會顯示省略號。我在兩行內，當我超出了會顯示省略號。我在兩行內，當我超出了會顯示省略號。</p>

若須要設置顯示多行，經過設置-webkit-line-clamp屬性，如顯示三行添加style=」-webkit-line-clamp:3」:

1	<p class="mui-ellipsis-2" style="-webkit-line-clamp:3">我在三行內，當我超出了會顯示省略號。我在三行內，當我超出了會顯示省略號。我在三行內，當我超出了會顯示省略號。我在三行內，當我超出了會顯示省略號。我在三行內，當我超出了會顯示省略號。我在三行內，當我超出了會顯示省略號。</p>

佈局(layout)

基本總體佈局

mui中提供了幾種常見的佈局系統，你們能夠很方便的構建出一個手機頁面，一個最簡單的例子爲：

1 2 3 4 5 6 7 8 9 10

<header class="mui-bar mui-bar-nav">     <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>     <h1 class="mui-title">標題</h1> </header> <footer class="mui-bar mui-bar-footer"> 底部 </footer> <div class="mui-content"> 主體 </div>

當底部內容爲選項卡時候，咱們會將.mui-bar-footer替換爲.mui-bar-tab：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<nav class="mui-bar mui-bar-tab">     <a class="mui-tab-item mui-active">         <span class="mui-icon mui-icon-home"></span>         <span class="mui-tab-label">首頁</span>     </a>     <a class="mui-tab-item">         <span class="mui-icon mui-icon-phone"></span>         <span class="mui-tab-label">電話</span>     </a>     <a class="mui-tab-item">         <span class="mui-icon mui-icon-email"></span>         <span class="mui-tab-label">郵件</span>     </a>     <a class="mui-tab-item">         <span class="mui-icon mui-icon-gear"></span>         <span class="mui-tab-label">設置</span>     </a> </nav>

在使用時須要注意一下兩個細節：

固定欄靠前：所謂的固定欄，也就是帶有.mui-bar屬性的節點，都是基於fixed定位的元素；常見組件包括：頂部導航欄（.mui-bar-nav）、底部工具條(.mui-bar-footer)、底部選項卡（.mui-bar-tab）;這些元素使用時需遵循一個規則：放在.mui-content元素以前，即便是底部工具條和底部選項卡，也要放在.mui-content以前，不然固定欄會遮住部分主內容。

一切內容都要包裹在mui-content中：除了固定欄以外，其它內容都要包裹在.mui-content中，不然就有可能被固定欄遮罩，緣由：固定欄基於Fixed定位，不受流式佈局限制，普通內容依然會從top:0的位置開始佈局，這樣就會被固定欄遮罩，mui爲了解決這個問題，定義了以下css代碼：

1 2 3 4 5 6 7 8 9

.mui-bar-nav ~ .mui-content { padding-top: 44px; } .mui-bar-footer ~ .mui-content {     padding-bottom: 44px; } .mui-bar-tab ~ .mui-content {     padding-bottom: 50px; }

你固然能夠經過自定義CSS的方式實現如上相似效果，但爲了使用簡便，建議將除固定欄以外的全部內容，所有放在.mui-content中。

局部元素佈局

設置邊距：能夠給塊元素設置.mui-content-padded類添加邊距，默認爲10px外邊距。

設置元素爲內聯塊對象：能夠給元素設置.mui-inline類，將元素呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。

1 2 3 4 5

<div class="mui-content-padded"> <div class="mui-inline">我是A</div> <div class="mui-inline">我是B</div> <div class="mui-inline">我是C</div> </div>

設置元素爲塊元素對象：能夠給元素設置元素.mui-block，將元素設置爲塊元素。

浮動：能夠給元素設置.mui-pull-left或者.mui-pull-right類，從而設置浮動效果，可使用.mui-clearfix清除浮動。

1 2 3 4

<div class="mui-clearfix"> <div class="mui-pull-left">我在左邊</div> <div class="mui-pull-right">我在右邊</div> </div>

塊級表格：mui中使用CSS表格的方式定義了.mui-table塊級表格佈局方式，會做元素爲塊級表格來顯示。

1 2 3 4 5 6 7 8 9 10 11

<div class="mui-table"> <div class="mui-table-cell mui-text-center">    我是A </div> <div class="mui-table-cell mui-text-center">    我是B     </div>     <div class="mui-table-cell mui-text-center">         我是C     </div> </div>

列表去掉默認樣式：能夠給ul元素設置.mui-list-unstyled類去掉ul標籤在瀏覽器中默認的原點和內邊距。

1 2 3 4 5

<ul class="mui-list-unstyled">    <li>我是第1條</li>    <li>我是第2條</li>    <li>我是第3條</li> </ul>

列表顯示爲內聯元素：能夠給ul元素設置.mui-list-inline類將li標籤元素設置爲內聯塊元素。

1 2 3 4 5

<ul class="mui-list-inline">     <li>我是第1條</li>     <li>我是第2條</li>     <li>我是第3條</li> </ul>

設置元素顯示與隱藏：.mui-visibility默認爲設置元素可見，.mui-hidden默認爲設置元素隱藏。

1 2 3 4 5 6 7 8 9

<div id="loading"> loading... </div> <script type="text/javascript"> setTimeout(function(){ document.getElementById("loading").classList.add('mui-hidden'); },3000) </script>

OS環境判斷多平臺適配：

mui會經過.mui.os.*方法判斷環境，將.mui-plus，.mui-plus-stream，.mui-ios，.mui-android，.mui-wechat，.mui-ios-version，.mui-android-version，.mui-wechat-version綁定在document.body.classList中，咱們能夠經過這些樣式類判斷當前的運行判斷，因而能夠作出一些適配，如：

1 2 3 4 5 6 7 8

<div class="mui-input-row mui-plus-visible">     <label>mui-plus-visible</label>     <input type="text" class="mui-input-speech mui-input-clear" placeholder="我在web環境下隱藏5+環境下顯示"> </div> <div class="mui-input-row mui-plus-hidden">     <label>mui-plus-hidden</label>     <input type="text" class="mui-input-clear" placeholder="我在web環境下顯示5+環境下隱藏"> </div>

mui中默認在plus環境下和微信環境下設置了樣式幾個樣式：

.mui-plus-visible：在plus環境下顯示，非plsu環境下隱藏
.mui-wechat-visible：在wechat環境下顯示，非wechat環境下隱藏
.mui-plus-hidden：在plus環境下隱藏，非plsu環境下顯示
.mui-wechat-hidden：在wechat環境下隱藏，非wechat環境下顯示

柵格系統佈局：mui中定義了一個簡單適用的柵格系統，將每一行寬度平均分爲12份，每一份做爲一個子柵格，每一行的內容置於.mui-row行容器中，經過.mui-col-xs-*和.mui-col-sm-*將行分紅若干行。使用如下媒體查詢（media query）將.mui-row像素寬度400px做爲分界，.mui-row像素寬度低於400px的使用.mui-col-xs-*，當.mui-row像素寬度高於400px使用.mui-col-sm-*。.mui-row寬度若不設置，默認爲屏幕像素寬度。

經過給每一行中的列設置1~12的數值，相應列的寬度會隨着.mui-row像素寬度變化。若一行中列的數值和大於12，多餘的列所在元素會做爲一個總體另起一行排列。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<style type="text/css">     .mui-row{         height: 50px;         line-height: 50px;         text-align: center;     }     .mui-col-sm-3{         border: 1px solid #aaa;     }     .mui-col-sm-9{         border: 1px solid #aaa;     } </style> <div class="mui-row">     <div class="mui-col-xs-4 mui-col-sm-3">         .mui-col-sm-3     </div>     <div class="mui-col-xs-8 mui-col-sm-9">         .mui-col-sm-9     </div> </div>

這樣咱們獲得了兩列元素，當.mui-row像素寬度低於400px時，左側寬度爲4份子柵格寬度，右側寬度爲8份子柵格寬度；當.mui-row像素寬度高於400px時，左側寬度爲4份子柵格寬度，右側寬度爲8份子柵格寬度。

區域滾動佈局：mui中封裝了一個scroll控件用於實現區域滾動，在使用區域滾動組件時候須要注意幾個細節，scroll控件有固定的dom結構，需手動初始化scroll控件，須要手動設置滾動區域的位置（通常設置爲top和bottom）。

固定DOM結構：

1 2 3 4 5

<div class="mui-scroll-wrapper"> <div class="mui-scroll"> <!--這裏放置真實顯示的DOM內容--> </div> </div>

初始化scroll控件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 經常使用配置項 var options = { scrollY: true, //是否豎向滾動 scrollX: false, //是否橫向滾動 startX: 0, //初始化時滾動至x startY: 0, //初始化時滾動至y indicators: true, //是否顯示滾動條 deceleration:0.0006 //阻尼係數,係數越小滑動越靈敏 bounce: true, //是否啓用回彈 } eg： mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 減速係數，係數越大，滾動速度越慢，滾動距離越小，默認值0.0006 });

手動設置高度：
通常在scroll控件最外面設置div爲絕對定位，設置top,bottom,left,right值，爲了方便，mui默認設置有個全屏類.mui-fullscreen。

1 2 3 4 5 6 7

.mui-fullscreen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

咱們能夠在scroll控件外面添加這個類，而後手動修改top和bottom值。