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

男娘i 2022-05-17 02:35 180阅读 0赞

一 .数字角标:

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.带图标的按钮

主要分为图标在左或者图标在右,默认为图标在文字左侧,也可以在右侧