一 .数字角标:
1.有底色代码(有文字背景色的):
<div class="mui-content-padded">
<h5>有底色</h5>
<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-bedge-warning">3</span>
<span class="mui-badge mui-badge-warning">456</span>
<span class="mui-badge mui-badge-red">789</span>
2.无底色代码(文字的颜色为背景色,但是无背景色):
<h5>无底色使用父元素的背景色</h5>
<span class="mui-badge mui-badge-inverted">123</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">456</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">777</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">888</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">999</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">000</span>
</div>
二. 按钮的样式
1.纯按钮的样式 按钮的样式主要分为两种:有底色的按钮和无底色的按钮(无底色的按钮使用父元素的背景色),连接按钮,默认的提交按钮以及默认的按钮等几种按钮,均在如下的代码中显示出来
<div class="mui-content">
<div class="mui-content-padded">
<h5>有底色的按钮</h5>
<button type="button" class="mui-btn">
默认
</button>
<div class="mui-btn mui-btn-primary">
蓝色
</div>
<span class="mui-btn mui-btn-success">
绿色
</span>
<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>
<h5 style="margin-top: 10px;">无底色按钮(使用父元素的背景色)</h5>
<button type="button" class="mui-btn mui-btn-outlined">
默认
</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">
操作
</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">
成功
</button>
<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">
警告
</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
危险
</button>
<button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">
高贵的紫色
</button>
<h5 style="margin-top: 15px">连接按钮:</h5>
<button type="button" class="mui-btn mui-btn-link">
添加
</button>
<h5 style="margin-top: 10px;">
默认input标签样式:
</h5>
<input type="button" value="type=button" />
<input type="reset" value="type=reset"/>
<input type="submit" value="type=submit"/>
<h5 style="margin-top: 10px;">默认button标签样式</h5>
<button type="button">按钮</button>
</div>
</div>
2.带图标的按钮
主要分为图标在左或者图标在右,默认为图标在文字左侧,也可以在右侧
<div class="mui-content-padded">
<h5>图标居左:</h5>
<button type="button" class="mui-btn mui-icon mui-icon-home">
首页
</button>
<button type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search">
搜索
</button>
<button type="button" class="mui-btn mui-btn-success mui-icon mui-icon-plus">添加</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
<span class="mui-icon mui-icon-trash"></span>
删除
</button>
<button type="button" class="mui-btn mui-btn-link">
<span class="mui-icon mui-icon-back"></span>
返回
</button>
<h5>图标居右:</h5>
<button type="button" class="mui-btn mui-icon mui-icon-home mui-right">
首页
</button>
<button type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search mui-right">
搜索
</button>
<button type="button" class="mui-btn mui-btn-success mui-icon mui-icon-plus mui-right">添加</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
删除
<span class="mui-icon mui-icon-trash"></span>
</button>
<button type="button" class="mui-btn mui-btn-link">
下一步
<span class="mui-icon mui-icon-forward"></span>
</button>
</div>