Layui快速入门之第四节 按钮

目录

一:基本用法

二:不同主题的按钮

基本案例:

三:不同尺寸的按钮

基本案例:

四:按钮圆角

五:按钮图标

六:按钮混搭 

七:按钮组合

八:按钮容器


一:基本用法

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

 
  
  
  
一个按钮

二:不同主题的按钮

不同主题的按钮
       名称                组合
       原始           layui-btn-primary
       默认           layui-btn
       百搭           layui-btn-normal
       暖色           layui-btn-warm
       警告            layui-btn-danger
       禁用            layui-btn-disabled

基本案例:

三:不同尺寸的按钮

不同尺寸的按钮
尺寸 组合
默认 layui-btn
迷你 layui-btn-xs
小型 layui-btn-sm
大型 layui-btn-lg
流体按钮(宽度自适应) layui-btn-fluid

基本案例:

Layui快速入门之第四节 按钮_第1张图片

四:按钮圆角

   样式:layui-btn-radius

五:按钮图标

Layui快速入门之第四节 按钮_第2张图片

六:按钮混搭 

跳转的按钮

七:按钮组合

八:按钮容器

Layui快速入门之第四节 按钮_第3张图片

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

你可能感兴趣的:(Layui,layui,前端,javascript)