颜色（内置色）

一 color(颜色)

mui中组件以iOS 7为基础，补充部分Android特有控件，颜色值主要有以下五种：

primary => #007aff; //蓝色(blue)
success => #4cd964; //绿色(green)
warning => #f0ad4e; //黄色(yellow)
danger  => #dd524d; //红色(red)
royal   => #8a6de9; //紫色(purple)

注：上述primary等颜色值关键词在引用的时候可以替换成对应的颜色单词，如 .mui-btn-primary 等效于 .mui-btn-blue 。

二 badge（数字角标）

数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。 角标的核心类是 .mui-badge ，默认为实心灰色背景。

另外mui内置了蓝色（primary/blue）、绿色(success/green)、黄色(warning/yellow)、红色(danger/red)、紫色（royal/purple）五种颜色，通过给button、span或者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>  <!--紫色-->

扩展：若无需底色（背景色），则增加 .mui-badge-inverted 类即可

三 button（按钮）

在button节点上增加 .mui-btn 类，即可生成默认按钮，默认背景为白色。另外mui内置了蓝色（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>

扩展：若希望生成无底色、有边框的按钮，仅需增加 .mui-btn-outlined 类即可

四 switch(开关)

默认开关控件,带on/off文字提示，默认打开时为绿色背景，可选颜色为蓝色，给 mui-switch 添加 .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-* 类添加背景颜色，可选参数为 primary/positive/negative 。

<div class="mui-bg-primary">我是蓝色背景</div>
<div class="mui-bg-positive">我是绿色背景</div>
<div class="mui-bg-negative">我是红色背景</div>