Hbulider得前端基础_mui框架总结3_数字角标和按钮

一 .数字角标:

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>