layui框架学习（3：按钮）

  通过Layui的预设类，可以将html的大部分元素样式调整为按钮形状（Layui教程中写的是任意HTML元素，但我觉得没有必要写的那么绝对）。Layui中的按钮预设类分为主题、尺寸、圆角等几个方面，同时支持将多个按钮放在按钮组、按钮容器中，还可以将图标置于按钮内。
  首先是普适性，预设类layui-btn标明当前元素是Layui按钮的样式，只要html元素的class中添加layui-btn预设类，则其外形即变为Layui的默认按钮样式，如下面示例所示：

	<button type="button" class="layui-btn">标准按钮</button>
	<hr />
	<div type="button" class="layui-btn">div按钮</div> 
	<hr />
	<a href="" class="layui-btn">链接按钮</a>

  Layui按钮样式的元素必须添加layui-btn预设类，除此之外还能添加主题、尺寸、圆角等方面的预设类以支持不同用途的按钮样式。其中主题的预设类包括以下几类，可以看出带主题的按钮是在基于layui-btn预设类的基础上再增加主题预设类组合而成，如果再配上上一篇文章中的边框色，即是Layui按钮教程中的带边框且不含背景色的主题按钮样式（下面第二个截图，以原始主题为基础，配置不同的边框色，形成不同的主题按钮样式）。

序号	预设类	说明
1	layui-btn layui-btn-primary	原始主题
2	layui-btn layui-btn-normal	百搭主题
3	layui-btn layui-btn-warm	暖色主题
4	layui-btn layui-btn-danger	警告主题
5	layui-btn layui-btn-disabled	禁用主题

  Layui的按钮样式支持大型按钮、默认按钮、小型按钮和迷你按钮四类，默认按钮尺寸没有预设类，只需添加layui-btn即可，其它几类尺寸需在layui-btn基础上添加额外的预设类，分别为layui-btn-lg、layui-btn-sm、 layui-btn-xs，样式如下面示例所示。此外，如果添加layui-btn-fluid预设类，则按钮宽度等同于父容器宽度。

	<div type="button" class="layui-btn layui-btn-lg">大型div按钮</div> 
	<hr />
	<button type="button" class="layui-btn">默认标准按钮</button>
	<hr />
	<div type="button" class="layui-btn layui-btn-sm">小型div按钮</div> 
	<hr />
	<a href="" class="layui-btn layui-btn-xs">迷你链接按钮</a>

  如果需要圆角矩形，则在layui-btn基础上增加layui-btn-radius预设类即可，样式如下面示例所示

	<div type="button" class="layui-btn layui-btn-lg layui-btn-radius">大型圆角div按钮</div> 
	<hr />
	<button type="button" class="layui-btn layui-btn-radius">默认圆角标准按钮</button>
	<hr />
	<div type="button" class="layui-btn layui-btn-sm layui-btn-radius">小型圆角div按钮</div> 
	<hr />
	<a href="" class="layui-btn layui-btn-xs layui-btn-radius">迷你圆角链接按钮</a>

  上一篇文章介绍图标时用按钮举过例，如果按钮样式的元素需要添加Layui内置图标，则在元素内部增加<i>子元素,通过预设类或Unicode标识方式引用Layui内置图标，这里就不再举例，有兴趣的可以看上一篇文章或者Layui的官方文档。
  可以用将功能相似或相近的按钮放在同一容器内，并将容器的class设置为layui-btn-group，这样就成为一个按钮组。同一按钮组内的按钮默认没有间隔，不同按钮组之间用空白间隔，样式如下面示例所示（Layui官方教程中的按钮组截图见下面第二张图，看着更清楚一些）：

<div class="layui-btn-group">
  <div type="button" class="layui-btn layui-btn-lg layui-btn-radius">大型圆角div按钮</div>
  <button type="button" class="layui-btn layui-btn-radius">默认圆角标准按钮</button>
</div>
<div class="layui-btn-group">
  <div type="button" class="layui-btn layui-btn-sm layui-btn-radius">小型圆角div按钮</div>
  <a href="" class="layui-btn layui-btn-xs layui-btn-radius">迷你圆角链接按钮</a>
</div>

  如果将所有按钮放在同一容器内，并将容器的class设置为layui-btn-container，这样就成为一个按钮容器。按钮容易内的按钮都自动均匀排列，如下图所示（三排按钮，每排按钮是一个按钮容器，示例图形来自Layui官网教程，参考文献3）。

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/