前端LayUI框架快速上手详解(一)

news2025/7/6 2:36:32

✍目录总览

在这里插入图片描述

🔥LayUI

🔥前端框架LayUI详解地址
🔥前端LayUI框架快速上手详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/119748962
🔥前端LayUI框架快速上手详解(二)https://blog.csdn.net/Augenstern_QXL/article/details/119749461
  • 最新版本v2.6.8
  • 官方文档讲解较细致，但同时也较繁琐，本篇旨在记录常用样式的用法与注意点.
  • 配套视频讲解地址:B站直达

1、LayUI

和 Bootstrap 有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

1.1、下载与使用

  • 官网：https://www.layui.com/

  • 点击立即下载即可

  • 下载完成后解压，我们看以下其目录结构，并将其完整的拷贝到我们自己的项目下。

在这里插入图片描述

  • 使用时我们只需引入下述两个文件即可使用
<!-- LayUI的核心CSS文件 -->
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<!-- LayUI的核心JS文件（采用模块化引入） --> 
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
  • 这是一个基本的入门页面
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用 layui</title>
  <!-- LayUI的核心CSS文件 -->
  <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
 
<!-- 你的 HTML 代码 -->
<!-- LayUI的核心JS文件 -->
<script src="./layui/layui.js"></script>
<script>
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer,
      	  form = layui.form;

      layer.msg('Hello World');
    });
</script> 
</body>
</html>

2、布局

2.1、布局容器

2.1.1、固定宽度

  • 将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。
  • 固定宽度的两侧有留白效果
<div class="layui-container" style="background-color: pink;height: 300px;">
        固定宽度（两侧有留白效果）
</div>

2.1.2、完整宽度

  • 可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid"的容器中，那么宽度将不会固定，而是 100% 适应
  • 完整宽度占据屏幕宽度的100%
<div class="layui-fluid" style="background-color: cyan;height: 300px;">
		 完整宽度(占据屏幕宽度的100%)
</div>

在这里插入图片描述

2.2、栅格系统

我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

2.2.1、栅格布局规则

  • 采用 class="layui-row" 来定义行，如：
<div class="layui-row"></div>
  • 采用类似 layui-col-md* 这样的预设类来定义一组列(column)，且放在行(row)中
    • 变量 md 代表的是不同屏幕下的标记
    • 变量 * 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
    • 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
  • 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
  • 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
  • 可以在列（column）元素中放入你自己的任意元素填充内容，完成布局！

示例：

<!-- 
    栅格系统
        列组合
            1. 定义行   .layui-row
            2. 定义列	.layui-col-md*
                md 表示不同屏幕的标识（xs、sm、md、lg）
                * 表示列的数量
            3. 每一行被均分为12列，列的总数不能超过12，否则会自动换行
 -->

<!-- 布局容器 -->
<div class="layui-container">
    <!-- 定义行 -->
    <div class="layui-row">
        <!-- 定义列  -->
        <div class="layui-col-md5" style="background-color: deepskyblue;">
            内容5/12
        </div>
        <div class="layui-col-md7" style="background-color: bisque;">
            内容7/12
        </div>
    </div>
    
    
    <!-- 定义行 -->
    <div class="layui-row">
        <!-- 定义列  -->
        <div class="layui-col-md4" style="background-color: powderblue;">
            内容4/12
        </div>
        <div class="layui-col-md4" style="background-color: mediumaquamarine;">
            内容4/12
        </div>
        <div class="layui-col-md6" style="background-color: grey;">
            内容6/12
        </div>
    </div>
</div>

在这里插入图片描述

2.2.2、响应式规则

  • 简单来说，就是会针对四类不同尺寸的屏幕，进行响应式适配处理。
<!--
	            4. 响应式规则
                栅格会自动根据屏幕的分辨率选择对应的样式效果。
-->

<body>
    <h3>平板、桌面端的不同表现：</h3>
    <div class="layui-row">
        <!-- 小屏幕占6列，中屏幕占4列 -->
        <div class="layui-col-sm6 layui-col-md4" style="background-color: thistle">
            平板≥768px：6/12 | 桌面端≥992px：4/12
        </div>
    </div>

    <div class="layui-row">
        <!-- 小屏幕占4列，中屏幕占6列 -->
        <div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;">
            平板≥768px：4/12 | 桌面端≥992px：6/12
        </div>
    </div>

    <div class="layui-row">
        <!-- 小屏幕占12列，中屏幕占8列 -->
        <div class="layui-col-sm12 layui-col-md8" style="background-color: coral">
            平板≥768px：12/12 | 桌面端≥992px：8/12
        </div>
    </div>
</body>

在这里插入图片描述

我们将屏幕尺寸切换为小屏幕平板尺寸

在这里插入图片描述

2.2.3、列间距

  • 设定列之间的间距

  • 且一行中最左的列不会出现左边距，最右的列不会出现右边距

  • 列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。

  • 给容器添加class="layui-col-space*"

    • * 支持1px-30px区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔
<!-- 列边距 .layui-col-space*  -->
<h3>列边距</h3>
<div class="layui-row layui-col-space20">
    <div class="layui-col-md4">
        <!-- 给具体的内容设置背景颜色 -->
        <div style="background-color: hotpink">4</div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: indianred">4</div>
    </div>
    <div class="layui-col-md4">
        <div style="background-color: powderblue">4</div>
    </div>
</div>

在这里插入图片描述

注意：

  • layui-col-space 设置后不起作用主要是因为设置的是 padding，也就是说向内缩，所以设置背景色 padding 也是会添上颜色，看起来好像没有间距一样。可以在里面加一个 div 来达到目的

  • 如果需要的间距高于30px（一般不常见），我们需要采用列偏移

2.2.4、列偏移

  • 对列追加类似 layui-col-md-offset* 的预设类，从而让列向右偏移
    • 其中 * 号代表的是偏移占据的列数，可选中为 1 - 12
    • 如 layui-col-md-offset3 ，即代表在 中型桌面屏幕下，让该列向右偏移3个列宽度。
<body>
   <h3>列偏移</h3>
   <div class="layui-row">
       <div class="layui-col-md4">
           <div style="background-color: red">4</div>
       </div>
       
       <!--向右移动4列-->
       <div class="layui-col-md4 layui-col-md-offset4">
           <div style="background-color: skyblue">
               向右移动4列
           </div>
       </div>
   </div>
</body>

2.2.5、列嵌套

  • 列之间可以无限嵌套列
<div class="layui-row">
    <!-- 大的盒子占6列 -->
    <div class="layui-col-md6">
        <div style="background-color: red">
            <div class="layui-row">
                <!-- 嵌套列 -->
                <div class="layui-col-md3" style="background-color: burlywood;">
                    内部列
                </div>
                <div class="layui-col-md5" style="background-color: indianred;">
                    内部列
                </div>
                <div class="layui-col-md2" style="background-color: mediumaquamarine;">
                    内部列
                </div>
            </div>
        </div>
    </div>
</div>

在这里插入图片描述

3、按钮

3.1、按钮风格

  • 向任意 HTML 元素设定 class="layui-btn" ，建立一个基础按钮。
  • 通过追加样式为 class="layui-btn-{type}" 来定义其他按钮风格
名称组合
原始class="layui-btn layui-btn-primary"
默认class="layui-btn"
百搭class="layui-btn layui-btn-normal"
暖色class="layui-btn layui-btn-warm"
警告class="layui-btn layui-btn-danger"
禁用class="layui-btn layui-btn-disabled"
<body>    <div class="layui-container">        <!-- 基础按钮 -->        <button type="button" class="layui-btn">一个标准的按钮</button>        <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>        <div class="layui-btn">一个按钮</div>        <hr>        <!-- 不同主题的按钮 -->        <button class="layui-btn">默认按钮</button>        <button class="layui-btn layui-btn-primary">原始按钮</button>        <button class="layui-btn layui-btn-normal">百搭按钮</button>        <button class="layui-btn layui-btn-warm">暖色按钮</button>        <button class="layui-btn layui-btn-danger">警告按钮</button>        <button class="layui-btn layui-btn-disabled">禁用按钮</button>    </div></body>

在这里插入图片描述

3.2、按钮尺寸

尺寸组合
大型class="layui-btn layui-btn-lg"
默认class="layui-btn"
小型class="layui-btn layui-btn-sm"
迷你class="layui-btn layui-btn-xs"
流体按钮(最大化适应)class="layui-btn layui-btn-fluid"
<body>    <div class="layui-container">        <!-- 不同尺寸的按钮 -->        <button class="layui-btn layui-btn-primary layui-btn-lg">大型原始按钮</button>        <button class="layui-btn">默认按钮</button>        <button class="layui-btn layui-btn-sm layui-btn-danger">小型警告按钮</button>        <button class="layui-btn layui-btn-xs">迷你按钮</button>        <button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>    </div></body>

在这里插入图片描述

3.3、圆角按钮

主题组合
原始class="layui-btn layui-btn-radius layui-btn-primary"s
默认class="layui-btn layui-btn-radius"
百搭class="layui-btn layui-btn-radius layui-btn-normal"
暖色class="layui-btn layui-btn-radius layui-btn-warm"
警告class="layui-btn layui-btn-radius layui-btn-danger"
禁用class="layui-btn layui-btn-radius layui-btn-disabled"
<div class="layui-container">    <!-- layui-btn-radius 圆角按钮 -->    <button class="layui-btn layui-btn-radius">默认圆角按钮</button>    <button class="layui-btn layui-btn-primary layui-btn-radius">原始圆角按钮</button>    <button class="layui-btn layui-btn-normal layui-btn-radius">百搭圆角按钮</button>    <button class="layui-btn layui-btn-warm layui-btn-radius">暖色圆角按钮</button>    <button class="layui-btn layui-btn-danger layui-btn-radius">警告圆角按钮</button>    <button class="layui-btn layui-btn-disabled layui-btn-radius">禁用圆角按钮</button></div>

在这里插入图片描述

3.4、图标按钮

3.4.1、图标

  • 对 i 标签 设定 class="layui-icon"
  • 然后对元素加上图标对应的 font-class
  • 内置图标一览表：https://www.layui.com/doc/element/icon.html
<i class="layui-icon layui-icon-face-smile"></i>

3.4.2、图标按钮

<body>    <div class="layui-container">        <!-- 图标按钮 -->        <button type="button" class="layui-btn">			<i class="layui-icon">&#xe608;</i> 添加		</button>        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">			<i class="layui-icon">&#x1002;</i> 刷新		</button>        <button type="button" class="layui-btn layui-btn-sm layui-btn-warm">			<i class="layui-icon layui-icon-heart"></i> 关注		</button>    </div></body>

在这里插入图片描述

4、导航

  • 导航一般应用于头部和侧边，是整个网页画龙点晴般的存在

  • 依赖加载模块：element

实现步骤：

  1. 引入的资源
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/><script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
  1. 依赖加载模块
<script type="text/javascript">    // 导航 依赖element模块,否则无法进行功能性操作    layui.use('element',function(){        var element = layui.element;    });					</script>

4.1、水平导航

  • 给一个无序列表 ul 添加 class="layui-nav"
  • 给 li 添加 class="layui-nav-ithm" 表示的是导航的子项
  • 给 li 添加 class="layui-this" 表示当前被选中的项
  • 给 li 里面容器添加 class="layui-nav-child" 表示的是二级菜单
<body>
    <!-- 
		水平导航	layui-nav
					layui-nav-item 表示的是导航的子项
					layui-this 表示当前被选中的项
					layui-nav-child 表示的是二级菜单
	 -->
    <!-- 水平导航 layui-nav -->
    <ul class="layui-nav">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="">解决方案</a>
            <!--二级菜单-->
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模块</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
    </ul>




    <script type="text/javascript">
        // 导航 依赖element模块
        layui.use('element', function() {
            var element = layui.element;
        });
    </script>
</body>

在这里插入图片描述

4.2.1、图片与徽章

除了一般的文字导航，我们还内置了图片和徽章的支持，如：

<body>
    <!-- 
		水平导航	layui-nav
					layui-nav-item 表示的是导航的子项
					layui-this 表示当前被选中的项
					layui-nav-child 表示的是二级菜单
	 -->
    
    <!-- 水平导航 -->
    <ul class="layui-nav">
        <!-- 导航的子项 -->
        <li class="layui-nav-item">

            <a href="">控制台<span class="layui-badge">9</span></a>
        </li>
        <!-- 导航的子项 -->
        <li class="layui-nav-item">
            <a href="">个人中心<span class="layui-badge-dot"></span></a>
        </li>
        <!-- 导航的子项 -->
        <li class="layui-nav-item">
            <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="#">修改信息</a></dd>
                <dd><a href="#">安全管理</a></dd>
                <dd><a href="#">退出</a></dd>
            </dl>
        </li>
    </ul>




    <script type="text/javascript">
        // 导航 依赖element模块
        layui.use('element', function() {
            var element = layui.element;
        });
    </script>
</body>

在这里插入图片描述

4.2、导航主题

通过对导航追加CSS背景类，让导航呈现不同的主题色

  • 给无序列表 ul 添加 class="layui-nav layui-bg-green" 可设置墨绿色背景的导航
  • 水平导航支持其他的背景主题有：layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
  • 垂直导航支持的其他背景颜色有：layui-bg-cyan (藏青)
<body>
    <!-- 墨绿 -->
    <ul class="layui-nav layui-bg-green">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="">解决方案</a>
            <!--二级菜单-->
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模块</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
    </ul>

    <hr>
    <!-- 藏青 -->
    <ul class="layui-nav layui-bg-cyan">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="">解决方案</a>
            <!--二级菜单-->
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模块</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
    </ul>

    <!-- 艳蓝 -->
    <hr>
    <ul class="layui-nav layui-bg-blue">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="">解决方案</a>
            <!--二级菜单-->
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模块</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
    </ul>


    <script type="text/javascript">
        // 导航 依赖element模块
        layui.use('element', function() {
            var element = layui.element;
        });
    </script>
</body>

在这里插入图片描述

4.3、垂直导航

  • 给无序列表 ul 添加 class="layui-nav layui-nav-tree"
  • 给 li 添加 class="layui-nav-item layui-nav-itemed" 表示此子项目是默认展开的
<!-- 垂直导航 layui-nav layui-nav-tree  -->
<ul class="layui-nav layui-nav-tree">
    <li class="layui-nav-item  layui-nav-itemed">
        <a href="#">默认展开</a>
        <dl class="layui-nav-child">
            <dd><a href="#">选项1</a></dd>
            <dd><a href="#">选项2</a></dd>
            <dd><a href="">跳转</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item layui-nav-itemed">
        <a href="#">解决方案</a>
        <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
</ul>

在这里插入图片描述

4.4、侧边导航

  • 给无序列表 ul 添加 class="layui-nav layui-nav-tree layui-nav-side"

  • 设定layui-this来指向当前页面分类。

<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --><ul class="layui-nav layui-nav-tree layui-nav-side">    <li class="layui-nav-item  layui-nav-itemed">        <a href="#">默认展开</a>        <dl class="layui-nav-child">            <dd><a href="#">选项1</a></dd>            <dd><a href="#">选项2</a></dd>            <dd><a href="">跳转</a></dd>        </dl>    </li>    <li class="layui-nav-item layui-nav-itemed">        <a href="#">解决方案</a>        <dl class="layui-nav-child">            <dd><a href="">移动模块</a></dd>            <dd><a href="">后台模版</a></dd>            <dd><a href="">电商平台</a></dd>        </dl>    </li>    <li class="layui-nav-item layui-this"><a href="">产品</a></li>    <li class="layui-nav-item"><a href="">大数据</a></li></ul>

在这里插入图片描述

4.5、总结

水平、垂直、侧边三个导航的 HTML 结构是完全一样的，不同的是

水平导航：class="layui-nav"

垂直导航需要追加：class="layui-nav-tree"

侧边导航需要追加：class="layui-nav-tree layui-nav-side"

4.6、面包屑导航

  • 给 span 标签 添加 layui-breadcrumb
<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
  • 我们还可以通过设置属性 lay-separator="-" 来自定义分隔符
<div class="layui-container">
    <!-- 面包屑式导航 -->
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">国际新闻</a>
        <a href="">亚太地区</a>
        <a><cite>正文</cite></a>
      </span>
    <hr>
    <!-- 设置属性 lay-separator="" 来自定义分隔符 -->
    <span class="layui-breadcrumb" lay-separator="-">
        <a href="">首页</a>
        <a href="">国际新闻</a>
        <a href="">亚太地区</a>
        <a><cite>正文</cite></a>
      </span>
    <hr>
    <span class="layui-breadcrumb" lay-separator="|">
        <a href="">娱乐</a>
        <a href="">八卦</a>
        <a href="">体育</a>
        <a href="">搞笑</a>
        <a href="">视频</a>
        <a href="">游戏</a>
        <a href="">综艺</a>
      </span>
</div>

在这里插入图片描述

5、选项卡

  • 导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。

  • 依赖加载模块：element

实现步骤：

  1. 引入的资源
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/><script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
  1. 依赖加载模块
<script type="text/javascript">
    // 注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

    });
</script>

5.1、选项卡风格

  • 默认风格给容器添加 ：class="layui-tab"
  • 简洁风格给容器追加：class="layui-tab-brief"
  • 卡片风格给容器需要追加：class=layui-tab-card
<body>
    <!-- 默认风格 .layui-tab-->
    <div class="layui-tab">
        <!-- 设置选项卡标题 .layui-tab-title -->
        <ul class="layui-tab-title">
            <li>网站设置</li>
            <li>用户管理</li>
            <li class="layui-this">权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <!-- 设置选项卡的内容 .layui-tab-content -->
        <div class="layui-tab-content">
            <div class="layui-tab-item">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <!-- 默认显示此内容 -->
            <div class="layui-tab-item layui-show">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    <hr>
    <!-- 简洁风格 -->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>
    <hr>
    <!-- 卡片风格 -->
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li>用户管理</li>
            <li>权限分配</li>
            <li>商品管理</li>
            <li>订单管理</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
            <div class="layui-tab-item">内容5</div>
        </div>
    </div>


    <script type="text/javascript">
        // 导航 依赖element模块
        layui.use('element', function() {
            var element = layui.element;
        });
    </script>
</body>

在这里插入图片描述

默认风格：class="layui-tab"

简洁风格需要追加：class="layui-tab-brief"

卡片风格需要追加：class="layui-tab-card"

6、表格

6.1、常规用法

  1. 给 table 标签增加 class="layui-table"

  2. 在colgroup 标签中定义表格列的宽度

    • <col width="数值"> 表示相应列所占的宽度

  3. thead 标签表示表格的头部区域

    • tr 标签用于定义表格中的行(行头)
      • th 标签用于定义表格中的表头(列头)
<!-- 
    表格
        class="layui-table"
        常用属性
            lay-even 如果设置了该属性，则可以显示隔行换色的效果
            lay-skin 设置表格边框风格
                line （行边框风格）
                row （列边框风格）
                nob （无边框风格）
            lay-size 设置表格的尺寸
                sm （小尺寸）
                lg （大尺寸）
 -->

<!-- 基础表格 .layui-table -->
<table class="layui-table">
    <colgroup>
        <!-- 第一列宽 150px 第二列宽300px 第三列宽自适应100% -->
        <col width="150">
        <col width="300">
        <col>
    </colgroup>
    <!-- thead 标签表示表格的头部区域,其内部必须拥有 tr 标签, tr标签一般位于第一行 -->
    <thead>
        <!-- tr用于定义表格中的行,必须嵌套在 table 中 -->
        <tr>
            <!-- th 用于定义表格中的表头,必须嵌套在 tr 中 -->
            <th>昵称</th>
            <th>加入时间</th>
            <th>签名</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>贤心</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行</td>
        </tr>
        <tr>
            <td>许闲心</td>
            <td>2016-11-28</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
        </tr>
    </tbody>
</table>

在这里插入图片描述

6.2、基础属性

静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：

属性名属性值备注
lay-even无用于开启隔行背景，可与其他属性一起使用
lay-skin=“属性值”line(行边框风格)
row(列边框风格)
nob(无边框风格)		若使用默认风格不设置该属性即可
lay-size=“属性值”sm(小尺寸)
lg(大尺寸)		若使用默认尺寸不设置该属性即可

将我们所需要的基础属性写在 table 标签上即可：如（一个带有隔行背景，且行边框风格的大尺寸表格）：

<table lay-even lay-skin="line" lay-size="lg">
	
</table>

7、表单

  • 依赖加载模块：form

实现步骤：

  1. 引入的资源
<link rel="stylesheet" type="text/css" href="layui-v2.5.6/layui/css/layui.css"/>
<script src="layui-v2.5.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
  1. 依赖加载模块
<!-- 加载模块 -->
<script type="text/javascript">
    // 加载form模块
    layui.use("form",function(){
        var form = layui.form;
    });		
</script>
  1. 在一个容器中设定 class="layui-form" 来标识一个表单元素块
<form class="layui-form" action="">

</form>
  1. 基本的行区块结构，它提供了响应式的支持。
    • 给 div 添加 class="layui-form-item" 代表”行“
    • 给 label 添加 class="layui-form-label" 代表”区“
    • 给 div 添加 class="layui-input-inline" 代表”块“
<body>
    <!-- 在一个容器中设定 class="layui-form" 来标识一个表单元素块 -->
    <form action="" class="layui-form">
        <!-- 基本的行区块结构，它提供了响应式的支持。-->
        <div class="layui-form-item">
            <label class="layui-form-label">标题区域</label>
            <div class="layui-input-inline">
                <!-- 输入框 -->
                <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码框区域</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </form>


    <script type="text/javascript">
        // 表单 依赖form模块
        layui.use('form', function() {
            var form = layui.form;
        });
    </script>
</body>

在这里插入图片描述

7.0、表单的常用属性

常用属性描述
required浏览器固定的必填字段
lay-verify需要验证的类型(值为 required 的话表示必填项)
class="layui-input"提供的通用的样式
class="layui-input-block"占据全部宽度
class="layui-input-inline"占据部分宽度
placeholder当文本框为空时，默认显示的文本信息
autocomplete表单元素是否自动填充(当浏览器中缓存中存在相同name属性的值时，会填充)

7.1、输入框

<!-- 输入框 --><input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
  • required：注册浏览器所规定的必填字段
  • lay-verify="required" ：注册 form 模块需要验证的类型
  • class="layui-input"：layui.css 提供的通用 CSS 类

7.2、下拉选择框

  • 通过 selected 属性设置默认选中项
  • 通过 disabled 属性开启禁用，可以设置 select 和 option 标签(表示禁用下拉框和禁用下拉选项)
  • 通过 optgroup 标签给 select 分组
  • 通过设置 lay-search 属性开启搜索匹配功能
<body>
    <div class="layui-container">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <!-- 
                            下拉选择框
                                1. 通过selected属性设置默认选中项
                                2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
                                3. 可以通过 optgroup 标签给select分组
                                4. 通过设置lay-search属性开启搜索匹配功能
                         -->
                    <select name="city" lay-verify="required">
                           <option value="">请选择一个城市</option>
                           <option value="010">北京</option>
                           <option value="021" selected>上海</option>
                           <option value="0571" disabled>杭州</option>
                    </select>
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        // 表单,依赖 form 模块
        layui.use('form', function() {
            var form = layui.form;
        })
    </script>
</body>

在这里插入图片描述

7.2.1、分组

  • 可以通过 optgroup 标签给select分组
<body>
    <div class="layui-container">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <!-- 
                            下拉选择框
                                1. 通过selected属性设置默认选中项
                                2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
                                3. 可以通过 optgroup 标签给select分组
                                4. 通过设置lay-search属性开启搜索匹配功能
                         -->
                    <!-- 分组 -->
                    <select name="quiz">
                        <option value="">请选择</option>
                        <!-- 分组城市记忆 -->
                        <optgroup label="城市记忆">
                          <option value="你工作的第一个城市">你工作的第一个城市？</option>
                        </optgroup>
                        
                        <!-- 分组学生时代 -->
                        <optgroup label="学生时代">
                          <option value="你的工号">你的工号？</option>
                          <option value="你最喜欢的老师">你最喜欢的老师？</option>
                        </optgroup>
                    </select>
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        // 表单,依赖 form 模块
        layui.use('form', function() {
            var form = layui.form;
        })
    </script>
</body>

在这里插入图片描述

7.2.2、开启搜索匹配

  • 通过设置 lay-search 属性开启搜索匹配功能
<body>
    <div class="layui-container">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-inline">
                    <!-- 
                            下拉选择框
                                1. 通过selected属性设置默认选中项
                                2. 通过disabled属性开启禁用，可以设置select和option标签（禁用下拉框和禁用下拉选项）
                                3. 可以通过 optgroup 标签给select分组
                                4. 通过设置lay-search属性开启搜索匹配功能
                         -->
                    <!-- 开启搜索匹配 -->
                    <select name="city" lay-verify="" lay-search>
                        <option value ="">请选择</option>
                        <option value="010">layer</option>
                        <option value="021">form</option>
                        <option value="0571">layim</option>
                      </select>
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        // 表单,依赖 form 模块
        layui.use('form', function() {
            var form = layui.form;
        })
    </script>
</body>

在这里插入图片描述

7.3、复选框

  • 通过设置 title 属性设置自定义文本(如果不需要显示文本，则不设置 title 属性)
  • 通过 checked 属性设置被选中的项
  • 通过·lay-skin 属性设置复选框的样式效果(lay-skin="primary" 表示原始效果)
  • 通过 disabled 属性禁用元素
<form action="" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">爱好</label>
        <div class="layui-input-block">
            <!--
                复选框 
                    1. 通过title属性设置自定义文本（如果不需要显示文本，则不设置title属性）
                    2. 通过checked属性设置被选中的项
                    3. 通过lay-skin属性设置复选框的样式效果（lay-skin="parmary"表示原始效果）
                    4. 通过disabled属性禁用元素
            -->
            <!-- 默认效果 -->
            <input type="checkbox" name="hobby" title="唱歌" checked value="sing" />
            <input type="checkbox" name="hobby" title="跳舞" value="dance" />
            <input type="checkbox" name="hobby" title="禁用" disabled />
            <br>
            <!-- 原始效果 -->
            <input type="checkbox" name="hobby" title="唱歌" lay-skin="primary" checked value="sing" />
            <input type="checkbox" name="hobby" title="跳舞" lay-skin="primary" value="dance" />
            <input type="checkbox" name="hobby" title="禁用" lay-skin="primary" disabled/>
        </div>
    </div>
</form>

在这里插入图片描述

7.3.1、开关

  • 将复选框，设置 lay-skin="switch" 形成开关风格
  • 通过 lay-text="打开的值|关闭的值" 来设定开关的两种状态的文本，通过| 分隔
  • 通过 checked 属性设置默认打开状态
  • 通过 disabled 属性禁用开关
  • 通过 value 属性设置选中的值
<form action="" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">开关</label>
        <div class="layui-input-block">
            <!-- 	
                开关
                    将复选框，设置lay-skin="switch"形成开关风格
                    1. 通过lay-text="打开的值|关闭的值"来设定开关的两种状态的文本，通过"|"分隔
                    2. 通过checked设置默认打开状态
                    3. 通过disabled属性禁用开关
                    4. 通过value属性设置选中的值

             -->
            <input type="checkbox" name="aa" lay-skin="switch" />
            <input type="checkbox" name="bb" lay-skin="switch" checked />
            <input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off" />
            <input type="checkbox" name="dd" lay-skin="switch" checked lay-text="打开|关闭" value="打开" />
            <input type="checkbox" name="ee" lay-skin="switch" lay-text="打开|关闭" disabled />
        </div>
    </div>
</form>

7.4、单选框

  • 通过 checked 设置默认选中项
  • 通过 disabled 属性禁用单选框
  • 通过 value 属性设置选中的值
<form action="" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <!-- 
                单选框
                    1. 通过checked设置默认选中项
                    2. 通过disabled属性禁用单选框
                    3. 通过value属性设置选中的值 
             -->
            <input type="radio" name="sex" value="nan" title="男">
            <input type="radio" name="sex" value="nv" title="女" checked>
            <input type="radio" name="sex" value="" title="中性" disabled>
        </div>
    </div>
</form>

在这里插入图片描述

7.5、文本域

  • 给 textarea 标签添加class="layui-textarea"
<form action="" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-inline">
            <!-- 
                文本域
                    class="layui-textarea"：layui.css提供的通用CSS类 
             -->
            <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea">

            </textarea>

        </div>
    </div>
</form>

在这里插入图片描述

7.6、组装行内表单

行内表单：表单元素在一行显示（div 盒子也不会全部占完宽度）

  • 给 div 设置 class="layui-inline" ： 定义外层行内
  • 给 div 设置 class="layui-input-inline" ：定义内层行内
<form action="" class="layui-form">
    <div class="layui-form-item">

        <!-- 定义外层行内 .layui-inline  -->
        <div class="layui-inline">
            <label class="layui-form-label">范围</label>
            <!-- 定义内层行内 .layui-input-inline -->
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 定义外层行内 -->
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <!-- 定义内层行内 -->
            <div class="layui-input-inline" style="width: 100px;">
                <input type="password" name="" autocomplete="off" class="layui-input">
            </div>
        </div>

    </div>
</form>

在这里插入图片描述

7.7、表单方框风格

  • 给 form 标签追加 class="layui-form-pane "，来设定表单的方框风格。
  • 内部结构不变，值得注意的是：复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性
<!-- 通过追加 layui-form-pane 的class，来设定表单的方框风格。 -->
<form class="layui-form  layui-form-pane" action="">
    <!-- 
      内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性 
  	-->
    <div class="layui-form-item" pane>
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>
</form>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407386.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【JavaEE初阶】前端第一节.HTML 基础(上篇)

【JavaEE初阶】前端第一节.HTML 基础(上篇)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 一、前端的引入&#xff1b; 二、第一个HTML程序 1.1 如何创建一个新HTML文件 2.2 HTML的完整结构 2.3 关于html文件的详解 2.4 使用 开发者工具 三…
阅读更多...
uniapp h5的支付宝，微信支付

uniapp h5的支付宝，微信支付

根据官方文档可知&#xff0c;uniapp对h5平台的支付没有进行封装&#xff0c;这就需要我们的自己针对不同的情况进行处理。 uniapp官方支付文档&#xff1a;uni.requestPayment(OBJECT) | uni-app官网 前端在进行h5页面的支付处理的时还是较为简单的&#xff0c;不论是支付宝还…
阅读更多...
大二C#实现酒店管理系统（C端展示、前台操作、登记入住、入住管理、职位管理、公告系统等）

大二C#实现酒店管理系统（C端展示、前台操作、登记入住、入住管理、职位管理、公告系统等）

大二C#实现酒店管理系统&#xff08;C端展示、前台操作、登记入住、入住管理、职位管理、公告系统等&#xff09; 前言项目技术介绍 1、开发工具&#xff1a;VS2022 2、数据库&#xff1a;SqlServer 3、前端请求&#xff1a;HTML5jQuery 4、第三方框架&#xff1a;Layui、视图可…
阅读更多...
无界微前端使用方法

无界微前端使用方法

1、概念 微前端&#xff1a;字面意思就是小小的前端&#xff0c;怎么小就是不管什么项目都能放在一个容器中运行&#xff0c;这些项目都能够独立部署、独立扩展&#xff0c;每个服务都具有稳固的模块边界&#xff0c;甚至允许使用不同的编程语言来编写不同服务&#xff0c;也可…
阅读更多...
Android ImageView使用详解（系列教程三）

Android ImageView使用详解（系列教程三）

目录 一、ImageView简介 二、ImageView基本使用 三、ImageView常用属性 四、几种图片的加载方法 五、ImageView的缩放类型 一、ImageView简介 ImageView是Android开发中最常用的组件之一&#xff0c;主要用于显示图片&#xff0c;但是它不只是能显示图片&#xff0c;任何D…
阅读更多...
SSE：后端向前端发送消息（springboot SseEmitter）

SSE：后端向前端发送消息（springboot SseEmitter）

背景 有一个项目&#xff0c;前端vue&#xff0c;后端springboot。现在需要做一个功能&#xff1a;用户在使用系统的时候&#xff0c;管理员发布公告&#xff0c;则使用系统的用户可以看到该公告。 基于此&#xff0c;一个简单的方案&#xff1a;前端使用JS方法setInterval&am…
阅读更多...
二次封装 el-table

二次封装 el-table

很多中后台业务的系统中&#xff0c;表格是最高频的组件之一&#xff0c;其中一般包括搜索条件、表格展示、表格操作列、分页等。那么我们二次封装的这个表格组件就需要包含以下几个功能点&#xff1a; 1、数据自动获取和刷新 2、自定义列配置 3、分页功能 4、根据搜索条件…
阅读更多...
VUE-鼠标悬浮到目标区域变成小手模样

VUE-鼠标悬浮到目标区域变成小手模样

需求&#xff1a;在这个按钮上&#xff0c;当鼠标悬浮上时要变成小手。记录下自己的开发内容实现&#xff1a;就是针对CSS给这个样式指定个属性就好了【cursor: pointer;】单独加到你要实现需求的div内或者元素里也可以加在class中&#xff0c;定义一个class样式&#xff0c;最…
阅读更多...
web数据可视化（ECharts版）

web数据可视化（ECharts版）

实训 实训1会员基本信息及消费能力对比分析 1&#xff0e;训练要点(1&#xff09;掌握堆积柱状图的绘制。(2&#xff09;掌握标准条形图的绘制。 (3&#xff09;掌握瀑布图的绘制。 2&#xff0e;需求说明 “会员信息表&#xff0e; xlsx ”文件记录了某鲜花店销售系统上的会员…
阅读更多...
微信小程序 初学——【音乐播放器】

微信小程序 初学——【音乐播放器】

一、项目效果展示 音乐推荐页面展示 播放器展示 播放列表展示 二、项目结构 音乐小程序项目页面结构&#xff1a; 1.tab导航栏 2.content内容区 3.player音乐播放器控件开发者工具创建空白项目&#xff1a; 新建项目 —— 设置项目名称和路径 —— 选择你注册的AppID…
阅读更多...
44岁了，我从没想过在CSDN创作2年，会有这么大收获

44岁了，我从没想过在CSDN创作2年，会有这么大收获

1998年上的大学&#xff0c;02年毕业&#xff0c;就算从工作算起&#xff0c;我也有20余年的码龄生涯了。 但正式开启博文的写作&#xff0c;却是2021年开始的&#xff0c;差不多也就写了2年的博客&#xff0c;今天我来说说我在CSDN的感受和收获。 我是真的没想到&#xff0c;…
阅读更多...
和ChatGPT对比，文心一言的表现已经是中国之光了

和ChatGPT对比，文心一言的表现已经是中国之光了

网络上各种测评满天飞&#xff0c;这里就不展开说了&#xff0c;针对“chatgpt”这项技术的难点&#xff0c;是十分巨大的。当你对文心一言以及其他国产AI软件存在不满的时候&#xff0c;你可以简单对着chatgpt或者文心一言搜索&#xff01;ChatGPT技术难点通俗来讲难度&#x…
阅读更多...
CSS实现文字凹凸效果

CSS实现文字凹凸效果

使用两个div分别用来实现凹凸效果&#xff1b;text-shadow语法 text-shadow: h-shadow v-shadow blur color; h-shadow&#xff1a;必需。水平阴影的位置。允许负值。 v-shadow &#xff1a;必需。垂直阴影的位置。允许负值。 blur&#xff1a;可选&#xff0c;模糊的距离。 co…
阅读更多...
用chatgpt写insar地质灾害的论文，重复率只有1.8%，chatgpt4.0写论文不是梦

用chatgpt写insar地质灾害的论文，重复率只有1.8%，chatgpt4.0写论文不是梦

突发奇想&#xff0c;想用chatgpt写一篇论文&#xff0c;并看看查重率&#xff0c;结果很惊艳&#xff0c;说明是确实可行的&#xff0c;请看下图。 下面是完整的文字内容。 InSAR (Interferometric Synthetic Aperture Radar) 地质灾害监测技术是一种基于合成孔径雷达…
阅读更多...
【小程序从0到1】小程序常用组件一览

【小程序从0到1】小程序常用组件一览

欢迎来到我的博客 &#x1f4d4;博主是一名大学在读本科生&#xff0c;主要学习方向是前端。 &#x1f36d;目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 &#x1f6e0;目前正在学习的是&#x1f525;React/小程序React/小程序React/小程序&am…
阅读更多...
Linux- 系统随你玩之--玩出花活的命令浏览器-双生姐妹花

Linux- 系统随你玩之--玩出花活的命令浏览器-双生姐妹花

文章目录1、背景2、命令浏览器-双生姐妹花2.1、姐妹花简介2.2 、验名正身2.3、常用功能选项3、常用实操3.1、发送请求获取文件3.1.1、抓取页面内容到一个文件中3.1.2、多个文件下载3.1.3、下载ftp文件3.1.4、断点续传3.1.5、上传文件3.1.6、内容输出3.2 、利用curl测试接口3.3 …
阅读更多...
数学建模—聚类(matlab、spss）K均值 Q型聚类 R型聚类

数学建模—聚类(matlab、spss）K均值 Q型聚类 R型聚类

文章目录一、K均值二、Q型聚类三、R型聚类聚类三种方法&#xff1a; 【说明】 1、三种方式输入矩阵行为个案&#xff0c;列为变量 量纲不同需要预处理&#xff0c;一般使用zscore() zscore()标准化为对每一列操作减去均值除以标准差 2、k均值需要自己确定k取值。Q、R型聚类需要…
阅读更多...
Echarts图表自适应？你可以这样做

Echarts图表自适应？你可以这样做

一、图表变形 使用 Echarts 绘制图表时&#xff0c;可能会遇到变形的问题。如下图&#xff1a; 其原因是 Echarts 在初始化实例的时候&#xff0c;对应 dom 元素的宽高还没有确定。 解决方案也很简单&#xff1a; 监听对应 dom 元素&#xff0c;如果大小发生变化&#xff0c;调…
阅读更多...
改哭了，终于解决了Cannot read properties of undefined (reading ‘parseComponent‘）

改哭了，终于解决了Cannot read properties of undefined (reading ‘parseComponent‘）

Vue中eslint报错的修改&#xff0c;绝对有效&#xff01;&#xff01;&#xff01; Syntax Error: TypeError: Cannot read properties of undefined (reading parseComponent)You may use special comments to disable some warnings. Use // eslint-disable-next-line to ig…
阅读更多...
Vue-Router的使用

Vue-Router的使用

目录 一、什么是路由&#xff1f; 二、在vue中如何使用路由&#xff1f; 三、vue-router的搭建 3.1 什么是hash和history模式&#xff1f; 四、路由的基本使用 2.1 router-view 2.1.1 命名视图 2.2 router-link 三、路由的参数 3.1 query参数 3.2 params参数 四、编…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023