[TOC] **Layui按鈕 主要分為以下幾個部分** 按鈕主題、按鈕尺寸、流體按鈕、圓角按鈕、圖標按鈕、按鈕組、按鈕容器 #### 1. 按鈕主題 --- **用于定義按鈕的主題樣式(背景色、是否禁用)** ![](https://img.itqaq.com/art/content/5906281d0bd543fe9c1a584cb1c1cd58.png) #### 2. 按鈕尺寸 --- **用于定義按鈕的尺寸大小** ![](https://img.itqaq.com/art/content/4dda5b32f2a8ffa35309050e2299a355.png) **流體按鈕:用于讓按鈕寬度為父元素寬度** layui-btn-fluid ```html <div style="width: 400px"> <button type="button" class="layui-btn">默認按鈕</button> </div> <br> <div style="width: 400px"> <button type="button" class="layui-btn layui-btn-fluid">流體按鈕</button> </div> ``` ![](https://img.itqaq.com/art/content/b35c598820821d480892aad2907cc773.png) #### 3. 圓角按鈕 --- layui-btn-radius ```html <button class="layui-btn layui-btn-radius">圓角按鈕</button> ``` #### 4. 圖標按鈕 --- ```html <button class="layui-btn layui-icon layui-icon-face-smile"></button> <br><br> <button class="layui-btn layui-icon layui-icon-face-smile"> 圖標按鈕</button> <br><br> <button class="layui-btn"> <i class="layui-icon layui-icon-face-smile"></i> 圖標按鈕 </button> ``` ![](https://img.itqaq.com/art/content/baf33a3daa8e3365d522044e17bcd7f6.png) #### 5. 按鈕組 --- **按鈕組可拉近多個按鈕間的距離** layui-btn-group ```html <button type="button" class="layui-btn">增加</button> <button type="button" class="layui-btn">編輯</button> <button type="button" class="layui-btn">刪除</button> <br><br> <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> ``` ![](https://img.itqaq.com/art/content/354fc6a4301aa3d87358a8babf502111.png) #### 6. 按鈕容器 --- **按鈕容器也可拉近按鈕間的距離,但是沒有按鈕組明顯** layui-btn-container ```html <button type="button" class="layui-btn">按鈕一</button> <button type="button" class="layui-btn">按鈕二</button> <button type="button" class="layui-btn">按鈕三</button> <br><br> <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> ``` ![](https://img.itqaq.com/art/content/ba4e518cae3dfb2951e29f4f5ed85977.png)