version 2.0 button
纯色按钮
线框按钮 btn-outline
按钮组
使用说明

设计说明:

按钮分为纯色按钮和线框按钮两大类,其中,

1. 分别用四种不同颜色表示四种状态,默认状态:.btn-default,正常状态.btn-primary,警告状态.btn-warning,危险状态.btn-danger

2. 分别用四个类表示四种按钮大小:超小尺寸.btn-xs,小按钮.btn-sm,默认尺寸,大按钮.btn-lg

3. 线框处理使用类:.btn-outline

4. 按钮禁用状态:纯色按钮.not-allowed;线框按钮.not-allowed-outline

另外,还增加了组合按钮:

1. 下拉按钮:纯色和线框两类,颜色代表状态同上,大小class同上。

2. 按钮组。

开发规范:

本元素为行内元素,采用button标签或者a标签,类名采用示例代码中的类名。

注意:

按钮之间间距产生原因:HTML中内联元素之间的回车换行符或连续空白看成一个空格字符(4px)来对待

推荐避免方式1:不换行,即js拼接字符串情况

推荐避免方式2:父元素font-size:0

<p class="font-size0"> <button class="btn btn-danger btn-sm btn-outline">btn-warning sm</button> <button class="btn btn-danger btn-sm btn-outline">btn-warning sm</button> </p>

避免方式3:去掉闭合标签,ps:最后一个不能去掉

<button class="btn btn-danger btn-sm btn-outline">btn-warning sm <button class="btn btn-danger btn-sm btn-outline">btn-warning sm</button>