Layui快速入门之第四节按钮

谁借莪１个温暖的怀抱￠ 2024-03-08 09:08 196阅读 0赞

**目录**

一：基本用法

二：不同主题的按钮

基本案例：

三：不同尺寸的按钮

基本案例：

四：按钮圆角

五：按钮图标

六：按钮混搭

七：按钮组合

八：按钮容器

--------------------

### 一：基本用法 ###

向任意 `HTML` 标签设定`class="layui-btn"` 建立一个基础按钮。通过追加格式为`layui-btn-{type}`的 `class` 来定义其它按钮风格。内置的按钮 `class` 可以进行任意组合，从而形成更多种按钮风格

<button type="button" class="layui-btn">一个标准的按钮</button>
      <button href="https://layui.org.cn/docs/button/button.html" class="layui-btn">一个可跳转的按钮</button>
      <div class="layui-btn">一个按钮</div>

###  ###

### 二：不同主题的按钮 ###

<table style="width:411px;">  不同主题的按钮  
 <tbody> 
  <tr> 
   <td style="width:145px;">&nbsp; &nbsp; &nbsp; &nbsp;名称</td> 
   <td style="width:262px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;组合</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">&nbsp; &nbsp; &nbsp; &nbsp;原始</td> 
   <td style="width:262px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; layui-btn-primary</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">&nbsp; &nbsp; &nbsp; &nbsp;默认</td> 
   <td style="width:262px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; layui-btn</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">&nbsp; &nbsp; &nbsp; &nbsp;百搭</td> 
   <td style="width:262px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; layui-btn-normal</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">&nbsp; &nbsp; &nbsp; &nbsp;暖色</td> 
   <td style="width:262px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; layui-btn-warm</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">&nbsp; &nbsp; &nbsp; &nbsp;警告</td> 
   <td style="width:262px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;layui-btn-danger</td> 
  </tr> 
  <tr> 
   <td style="width:145px;">&nbsp; &nbsp; &nbsp; &nbsp;禁用</td> 
   <td style="width:262px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;layui-btn-disabled</td> 
  </tr> 
 </tbody> 
</table>

#### 基本案例： ####

![56f554f9281045ecb29858865100fc7d.jpeg][]

### 三：不同尺寸的按钮 ###

<table style="width:345px;">  不同尺寸的按钮  
 <tbody> 
  <tr> 
   <td style="width:157px;">尺寸</td> 
   <td style="width:184px;">组合</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">默认</td> 
   <td style="width:184px;">layui-btn</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">迷你</td> 
   <td style="width:184px;">layui-btn-xs</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">小型</td> 
   <td style="width:184px;">layui-btn-sm</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">大型</td> 
   <td style="width:184px;">layui-btn-lg</td> 
  </tr> 
  <tr> 
   <td style="width:157px;">流体按钮（宽度自适应）</td> 
   <td style="width:184px;">layui-btn-fluid</td> 
  </tr> 
 </tbody> 
</table>

#### 基本案例： ####

<div class="layui-btn-container">  
      <button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
      <button type="button" class="layui-btn">默认按钮</button>
      <button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
      <button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>
    </div> 
     
    <div class="layui-btn-container">
      <button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
      <button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
      <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
      <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
    </div>
     
    <div class="layui-btn-container">
      <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
      <button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
    </div>
     
    <div style="width: 380px;">
      <button type="button" class="layui-btn layui-btn-fluid">流体按钮（宽度自适应）</button>
    </div>

![ee284daba6e64108afa9f2d83673f052.jpeg][]

###  ###

### 四：按钮圆角 ###

样式：layui-btn-radius

![42e3079496214a9ab10980c083d359a0.jpeg][]

###  ###

### 五：按钮图标 ###

![ec3c81c4542c4cd49735a36d23beee31.jpeg][]

###  ###

### 六：按钮混搭 ###

<div class="layui-btn-container">
      <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
      <a href="/index.html" class="layui-btn" target="_blank">跳转的按钮</a>
      <button type="button" class="layui-btn layui-btn-sm layui-btn-normal">
        <i class="layui-icon layui-icon-delete"></i> 删除
      </button>
      <button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">
        <i class="layui-icon layui-icon-share"></i> 分享
      </button>
    </div>

![ac86f9b3ce4a46e0911cbb8aa7238bc9.jpeg][]

### 七：按钮组合 ###

![1572a12b357f437fad7123489a4f451d.jpeg][]

### 八：按钮容器 ###

![b9393d13a87343849ae825bd5b9cdf85.jpeg][]

PS：按钮的主题、尺寸、图标、圆角的交叉组合，可以形成丰富多样的按钮种类。其中颜色也可以根据使用场景自主更改。

[56f554f9281045ecb29858865100fc7d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/014e78deb5d14a08b1ff4ecbb7a2d9f8.png
[ee284daba6e64108afa9f2d83673f052.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/a678f0e54ab6434090d1da697f33f744.png
[42e3079496214a9ab10980c083d359a0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/4a9820f8c6c44fbf86da599170306098.png
[ec3c81c4542c4cd49735a36d23beee31.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/e7c8fe4a880c4caabae521b04e8b2dc9.png
[ac86f9b3ce4a46e0911cbb8aa7238bc9.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/84f4e13ce5dc4da89dfe83fe6e412cad.png
[1572a12b357f437fad7123489a4f451d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/774712341d5841dbbb544b6f0ba6f0ff.png
[b9393d13a87343849ae825bd5b9cdf85.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/d7c55068282f4673ac94947511798532.png