mui組件通用CSS類
color(顏色)
mui中組件以iOS 7為基礎(chǔ)拨脉，補充部分Android特有控件，顏色值主要有以下五種：
primary => #007aff; //藍色(blue)
success => #4cd964; //綠色(green)
warning => #f0ad4e; //黃色(yellow)
danger => #dd524d; //紅色(red)
royal => #8a6de9; //紫色(purple)
注：上述primary等顏色值關(guān)鍵詞在引用的時候可以替換成對應(yīng)的顏色單詞，如.mui-btn-primary等效于.mui-btn-blue;
badge（數(shù)字角標）：默認背景為灰色，另外mui內(nèi)置了藍色（primary/blue）、綠色(success/green)了牛、黃色(warning/yellow)、紅色(danger/red)辰妙、紫色（royal/purple）五種顏色鹰祸，通過給button或者a標簽添加.mui-badge-*類添加背景顏色。如：
<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內(nèi)置了藍色（primary/blue）蛙婴、綠色(success/green)、黃色(warning/yellow)尔破、紅色(danger/red)街图、紫色（royal/purple）五種顏色，通過給button或者a標簽添加.mui-btn-*類添加背景顏色懒构。
<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(開關(guān))：默認值為綠色餐济，可選顏色為藍色，添加.mui-switch-blue類即可胆剧。
<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-*類添加背景顏色絮姆，可選參數(shù)為primary/positive/negative。
<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設(shè)置文字位置。
<div class="mui-text-left">我在左邊</div>
<div class="mui-text-center">我在中間</div>
<div class="mui-text-right">我在右邊</div>
溢出隱藏：當(dāng)文字內(nèi)容超過一行或者多行時铃绒，溢出文本用省略號代替鸽照。
顯示單行：
<p class="mui-ellipsis">我在一行內(nèi)，當(dāng)我超出了會顯示省略號匿垄。我在一行內(nèi)移宅，當(dāng)我超出了會顯示省略號。我在一行內(nèi)椿疗，當(dāng)我超出了會顯示省略號漏峰。我在一行內(nèi)，當(dāng)我超出了會顯示省略號届榄。</p>
顯示兩行：
<p class="mui-ellipsis-2">我在兩行內(nèi)浅乔，當(dāng)我超出了會顯示省略號。我在兩行內(nèi)铝条，當(dāng)我超出了會顯示省略號靖苇。我在兩行內(nèi)，當(dāng)我超出了會顯示省略號班缰。我在兩行內(nèi)贤壁，當(dāng)我超出了會顯示省略號。我在兩行內(nèi)埠忘，當(dāng)我超出了會顯示省略號脾拆。</p>
若需要設(shè)置顯示多行，通過設(shè)置-webkit-line-clamp屬性莹妒，如顯示三行添加style="-webkit-line-clamp:3":
<p class="mui-ellipsis-2" style="-webkit-line-clamp:3">我在三行內(nèi)名船，當(dāng)我超出了會顯示省略號。我在三行內(nèi)旨怠，當(dāng)我超出了會顯示省略號渠驼。我在三行內(nèi)，當(dāng)我超出了會顯示省略號鉴腻。我在三行內(nèi)迷扇，當(dāng)我超出了會顯示省略號。我在三行內(nèi)拘哨，當(dāng)我超出了會顯示省略號谋梭。我在三行內(nèi)，當(dāng)我超出了會顯示省略號倦青。</p>
布局(layout)
基本整體布局
mui中提供了幾種常見的布局系統(tǒng)瓮床，大家可以很方便的構(gòu)建出一個手機頁面，一個最簡單的例子為：
<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>
當(dāng)?shù)撞績?nèi)容為選項卡時候产镐，我們會將.mui-bar-footer替換為.mui-bar-tab：
<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">設(shè)置</span>
</a>
</nav>
在使用時需要注意一下兩個細節(jié)：
固定欄靠前：所謂的固定欄隘庄，也就是帶有.mui-bar屬性的節(jié)點，都是基于fixed定位的元素癣亚；常見組件包括：頂部導(dǎo)航欄（.mui-bar-nav）丑掺、底部工具條(.mui-bar-footer)、底部選項卡（.mui-bar-tab）;這些元素使用時需遵循一個規(guī)則：放在.mui-content元素之前述雾，即使是底部工具條和底部選項卡街州，也要放在.mui-content之前兼丰，否則固定欄會遮住部分主內(nèi)容。
一切內(nèi)容都要包裹在mui-content中：除了固定欄之外唆缴，其它內(nèi)容都要包裹在.mui-content中鳍征，否則就有可能被固定欄遮罩，原因：固定欄基于Fixed定位面徽，不受流式布局限制艳丛，普通內(nèi)容依然會從top:0的位置開始布局，這樣就會被固定欄遮罩趟紊，mui為了解決這個問題氮双，定義了如下css代碼：
.mui-bar-nav ~ .mui-content {
padding-top: 44px;
}
.mui-bar-footer ~ .mui-content {
padding-bottom: 44px;
}
.mui-bar-tab ~ .mui-content {
padding-bottom: 50px;
}
你當(dāng)然可以通過自定義CSS的方式實現(xiàn)如上類似效果，但為了使用簡便霎匈，建議將除固定欄之外的所有內(nèi)容戴差，全部放在.mui-content中。
局部元素布局
設(shè)置邊距：可以給塊元素設(shè)置.mui-content-padded類添加邊距铛嘱，默認為10px外邊距造挽。
設(shè)置元素為內(nèi)聯(lián)塊對象：可以給元素設(shè)置.mui-inline類，將元素呈遞為內(nèi)聯(lián)對象弄痹，但是對象的內(nèi)容作為塊對象呈遞饭入。
<div class="mui-content-padded">
<div class="mui-inline">我是A</div>
<div class="mui-inline">我是B</div>
<div class="mui-inline">我是C</div>
</div>
設(shè)置元素為塊元素對象：可以給元素設(shè)置元素.mui-block ，將元素設(shè)置為塊元素肛真。
浮動：可以給元素設(shè)置.mui-pull-left或者.mui-pull-right類谐丢，從而設(shè)置浮動效果，可以使用.mui-clearfix清除浮動蚓让。
<div class="mui-clearfix">
<div class="mui-pull-left">我在左邊</div>
<div class="mui-pull-right">我在右邊</div>
</div>
塊級表格：mui中使用CSS表格的方式定義了.mui-table塊級表格布局方式乾忱，會作元素為塊級表格來顯示。
<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元素設(shè)置.mui-list-unstyled類去掉ul標簽在瀏覽器中默認的原點和內(nèi)邊距历极。
<ul class="mui-list-unstyled">
<li>我是第1條</li>
<li>我是第2條</li>
<li>我是第3條</li>
</ul>
列表顯示為內(nèi)聯(lián)元素：可以給ul元素設(shè)置.mui-list-inline類將li標簽元素設(shè)置為內(nèi)聯(lián)塊元素窄瘟。
<ul class="mui-list-inline">
<li>我是第1條</li>
<li>我是第2條</li>
<li>我是第3條</li>
</ul>
設(shè)置元素顯示與隱藏：.mui-visibility默認為設(shè)置元素可見，.mui-hidden 默認為設(shè)置元素隱藏趟卸。
<div id="loading">
loading...
</div>
<script type="text/javascript">
setTimeout(function(){
document.getElementById("loading").classList.add('mui-hidden');
},3000)
</script>
OS環(huán)境判斷多平臺適配：
mui會通過mui.os.*方法判斷環(huán)境蹄葱，將.mui-plus，.mui-plus-stream锄列，.mui-ios图云，.mui-android，.mui-wechat邻邮，.mui-ios-version竣况，.mui-android-version，.mui-wechat-version綁定在document.body.classList中筒严，我們可以通過這些樣式類判斷當(dāng)前的運行判斷丹泉，于是可以做出一些適配情萤，如：
<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環(huán)境下隱藏5+環(huán)境下顯示">
</div>
<div class="mui-input-row mui-plus-hidden">
<label>mui-plus-hidden</label>
<input type="text" class="mui-input-clear" placeholder="我在web環(huán)境下顯示5+環(huán)境下隱藏">
</div>
mui中默認在plus環(huán)境下和微信環(huán)境下設(shè)置了樣式幾個樣式：
.mui-plus-visible：在plus環(huán)境下顯示，非plsu環(huán)境下隱藏
.mui-wechat-visible：在wechat環(huán)境下顯示摹恨，非wechat環(huán)境下隱藏
.mui-plus-hidden：在plus環(huán)境下隱藏紫岩，非plsu環(huán)境下顯示
.mui-wechat-hidden：在wechat環(huán)境下隱藏，非wechat環(huán)境下顯示
柵格系統(tǒng)布局：mui中定義了一個簡單適用的柵格系統(tǒng)睬塌，將每一行寬度平均分為12份，每一份作為一個子?xùn)鸥裥颍恳恍械膬?nèi)容置于.mui-row行容器中揩晴，通過.mui-col-xs-*和.mui-col-sm-*將行分成若干行。使用以下媒體查詢（media query）將.mui-row像素寬度400px作為分界贪磺，.mui-row像素寬度低于400px的使用.mui-col-xs-*硫兰，當(dāng).mui-row像素寬度高于400px使用.mui-col-sm-*。.mui-row寬度若不設(shè)置寒锚，默認為屏幕像素寬度劫映。
通過給每一行中的列設(shè)置1~12的數(shù)值，相應(yīng)列的寬度會隨著.mui-row像素寬度變化刹前。若一行中列的數(shù)值和大于12泳赋，多余的列所在元素會作為一個整體另起一行排列。
<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>
這樣我們得到了兩列元素喇喉，當(dāng).mui-row像素寬度低于400px時祖今，左側(cè)寬度為4份子?xùn)鸥駥挾龋覀?cè)寬度為8份子?xùn)鸥駥挾燃鸺迹划?dāng).mui-row像素寬度高于400px時千诬，左側(cè)寬度為4份子?xùn)鸥駥挾龋覀?cè)寬度為8份子?xùn)鸥駥挾取?/p>
