【Layui】03 按钮 Button

文档位置：

https://www.layui.com/doc/element/button.html

01、【按钮主题】

<div>
    <button type="button" type="button" class="layui-btn layui-btn-primary">原始按钮</button>
    <button type="button" type="button" class="layui-btn">默认按钮</button>
    <button type="button" type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
    <button type="button" type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
    <button type="button" type="button" class="layui-btn layui-btn-danger">警告按钮</button>
    <button type="button" type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>

必要样式：

layui-btn 默认按钮

主题样式：

layui-btn layui-btn-primary 无色原始

layui-btn layui-btn-normal 百搭蓝色

layui-btn layui-btn-warm 淡桔黄色

layui-btn layui-btn-danger 警告橙色

layui-btn layui-btn-disabled 灰白禁用

02、【大小类型】

<div>
    <button type="button" type="button" class="layui-btn layui-btn-lg">大型按钮</button>
    <button type="button" type="button" class="layui-btn">默认按钮</button>
    <button type="button" type="button" class="layui-btn layui-btn-sm">小型按钮</button>
    <button type="button" type="button" class="layui-btn layui-btn-xs">迷你按钮</button>
</div>

默认就是不需要写，正常的

layui-btn layui-btn-lg 大按钮
layui-btn layui-btn-sm 小按钮
layui-btn layui-btn-xs 迷你按钮

大小和颜色允许组合使用，没有先后属性的先后顺序：

<span class="layui-btn layui-btn-normal layui-btn-lg">sadasd</span>

对渲染元素的要求仅仅是容器标签即可

03、【流体化 Fluid】

属性：

layui-btn-fluid

流体按钮就是按钮的宽度自适应到当前页面的宽度

<button type="button" type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

同样适用于上述的颜色大小组合设置

04、【圆角化 Radius】

属性：

layui-btn-radius

<span class="layui-btn layui-btn-radius layui-btn-warm">圆角按钮</span>

05、【图标组合 Icon combat】

官方的建议是按钮就只渲染按钮，图标就只渲染图标，然后再装填文本内容

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon">ဂ</i> 添加
</button>

06、【按钮组】

即一组按钮，彼此没有空隙间隔，使用一个组属性修饰一组按钮的容器

属性：

layui-btn-group

案例：

    <div class="layui-btn-group">
        <button type="button" class="layui-btn">增加</button>
        <button type="button" class="layui-btn">编辑</button>
        <button type="button" class="layui-btn">删除</button>
    </div>

07、【按钮容器】

其意义是为了页面排版，当按钮数量多大10个以上就需要考虑容器类属性进行排版渲染

属性：

layui-btn-container

案例：

<div class="layui-btn-container">
  <button type="button" class="layui-btn">按钮一</button>
  <button type="button" class="layui-btn">按钮二</button>
  <button type="button" class="layui-btn">按钮三</button>
</div>