YDUI Touch - 常见移动端弹窗提示框集合类

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、调用

普通按钮（宽度自适应）

primary danger warning disabled hollow

在元素节点上增加 .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>

YDUI Touch Docs 返回首页