嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

Button

1、说明

1.1、示例:http://m.ydui.org/html/button.html

1.2、常用按钮样式;可使用a、span、div、button或input等常用标签;

2、使用

2.1、按钮提供五种色系【绿色/红色/橘色/灰色/白底镂空】对应四种场景【安全/危险/警告/禁用/普通】;

分别对应【.btn-primary/.btn-danger/.btn-warning/.btn-disabled/.btn-hollow】;

2.2、按钮分为普通按钮、块级按钮;

3、调用

普通按钮(宽度自适应)

在元素节点上增加 .btn类相应色系class类,即可生成普通按钮;

<a href="javascript:;" class="btn btn-primary">primary</a>
<a href="javascript:;" class="btn btn-danger">danger</a>
<a href="javascript:;" class="btn btn-warning">warning</a>
<a href="javascript:;" class="btn btn-disabled">disabled</a>
<a href="javascript:;" class="btn btn-hollow">hollow</a>
块级按钮(宽度占100%)

在元素节点上增加 .btn-block 类和 相应色系class类,即可生成块级按钮;

建议在块级按钮外添加 .m-button 类,以间隔两边的距离。

<button type="button" class="btn-block btn-primary">primary</button>
<button type="submit" class="btn-block btn-danger">danger</button>
<button type="submit" class="btn-block btn-warning">warning</button>
<input type="submit" class="btn-block btn-disabled" value="disabled"/>
<input type="button" class="btn-block btn-hollow" value="hollow"/>
将按钮分组

实际上分组只是将按钮间隔屏幕两边的距离,否则按钮将贴至屏幕边缘。

<div class="m-button">
<button type="button" class="btn-block btn-primary">primary</button>
<button type="submit" class="btn-block btn-danger">danger</button>
</div>

4、专属定制

4.1、按钮的高度、字体字号、字体颜色、背景颜色等都可以通过这里定制;

5、参与讨论

5.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。