layUI基本元素--乐字节前端

最新推荐文章于 2023-12-15 22:03:53 发布
最新推荐文章于 2023-12-15 22:03:53 发布
阅读量270 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dirft_din/article/details/106811961
版权
这篇博客详细介绍了layUI的基本元素，包括按钮的用法、主题、尺寸和圆角，导航的类型如水平、垂直和面包屑，以及选项卡的实现步骤和不同风格。此外，还提到了表格的常规用法和基础属性。
摘要由CSDN通过智能技术生成

基本元素

按钮
用法

​ 向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。

<!-- 基础按钮 -->
<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
<div class="layui-btn">一个按钮</div>
主题
名称组合
原始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”

示例：

<!-- 不同主题的按钮 -->
<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>
尺寸
尺寸组合
大型class=“layui-btn layui-btn-lg”
默认class=“layui-btn”
小型class=“layui-btn layui-btn-sm”
迷你class=“layui-btn layui-btn-xs”
<!-- 不同尺寸的按钮 -->
<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>
圆角

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>
图标
<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>
导航

​ 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。

​ 依赖加载模块：element

实现步骤：

  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript">
    // 注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

    });
</script>

  3. 显示指定类型的导航

水平导航
<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="javascript:;">解决方案</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>
</ul>
垂直/侧边导航
<ul class="layui-nav layui-nav-tree" >
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默认展开</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">选项1</a></dd>
      <dd><a href="javascript:;">选项2</a></dd>
      <dd><a href="">跳转</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">解决方案</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>

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

水平导航：layui-nav
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side
导航主题

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

<!-- 如定义一个墨绿背景色的导航 -->
<ul class="layui-nav layui-bg-move" >
  …
</ul>

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

面包屑
<span class="layui-breadcrumb">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

你还可以通过设置属性 lay-separator="" 来自定义分隔符。例如：

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>
选项卡

​ 导航菜单可应用于头部和侧边，支持响应式，支持删除选项卡等功能。

​ 依赖加载模块：element

实现步骤

  1. 引入的资源

    <link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

  2. 依赖加载模块

    <script type="text/javascript">
    // 注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

    });
</script>

  3. 加载HTML

    <div class="layui-tab">
  <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>
选项卡风格
默认风格：layui-tab
简洁风格需要追加class：layui-tab-brief
卡片风格需要追加class：layui-tab-card
带删除的选项卡

可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除

<div class="layui-tab" lay-allowClose="true">
  <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>
表格
常规用法
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <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>
基础属性
属性名属性值备注
lay-even无用于开启 隔行 背景，可与其它属性一起使用
lay-skin=“属性值”line （行边框风格）
row （列边框风格）
nob （无边框风格）		若使用默认风格不设置该属性即可
lay-size=“属性值”sm （小尺寸）
lg （大尺寸）		若使用默认尺寸不设置该属性即可

你所需要的基础属性写在table标签上，例如：

<!-- 一个带有隔行背景，且行边框风格的大尺寸表格 -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <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>
dirft_din
关注
layUI表单--乐字节前端
dirft_din的博客
06-18 413
表单 ​ 依赖加载模块：form 在一个容器中设定 class=“layui-form” 来标识一个表单元素块 <form class="layui-form" action=""> </form> 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。 <div class="layui-form-item"> <label class="lay
layUI分页处理--乐字节前端
dirft_din的博客
06-19 808
分页 ​ 模块加载名称：laypage 快速使用 ​ laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css"> <
基于swoft 2.x 开发的新零售多门店系统源码+项目说明（涵盖门店管理系统，收银系统、会员管理系统、营销拓客系统等）.zip
最新发布
03-05
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。 基于swoft 2.x 开发的新零售多门店系统源码+项目说明（涵盖门店管理系统，收银系统、会员管理系统、营销拓客系统等，实现“线上下单，到店服务；线上充值，门店消费）.zip 基于swoft 2.x 开发的新零售多门店系统源码+项目说明（涵盖门店管理系统，收银系统、会员管理系统、营销拓客系统等，实现“线上下单，到店服务；线上充值，门店消费）.zip 基于swoft 2.x 开发的新零售多门店系统源码+项目说明（涵盖门店管理系统，收银系统、会员管理系统、营销拓客系统等，实现“线上下单，到店服务；线上充值，门店消费）.zip 基于swoft 2.x 开发的新零售多门店系统源码+项目说明（涵盖门店管理系统，收银系统、会员管理系统、营销拓客系统等，实现“线上下单，到店服务；线上充值，门店消费）.zip
HTML特殊字符编码
renxingxingge的专栏
08-18 352
<br />
html常用特殊符号
逍竹的博客
12-20 2万+
描述 符号/显示 UNICODE HEX CODE HTML CODE HTML ENTITY CSS CODE Left Arrow ← U+02190 &amp;#x2190; &amp;#8592; &amp;larr; \2190 Up Arrow ↑ U+02191 &amp;#x2191;...
html字母相关符号
云博客_资源宝分享
03-16 4032
html符号总汇：https://blog.csdn.net/u012241616/article/details/114867161 字母相关符号 描述 符号/显示 UNICODE HEX CODE HTML CODE HTML ENTITY CSS CODE Uppercase A A U+00041 &#x41; &#65; \0041 Uppercase B B U+00042 .
web网页设计：用html css做一个漂亮的网站 仿新浪微博个人主页
wx___BJ050106的博客
12-15 221
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
layui菜鸟教程--乐字节前端
dirft_din的博客
06-16 2万+
主要内容 LayUI 的介绍 ​ layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。 ​ 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。 ​ 官网：https://ww.
html layui分页代码,layUI分页处理--乐字节前端
weixin_39964833的博客
06-10 428
分页​ 模块加载名称：laypage快速使用​ laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。分页layui.use('laypage', function(){var laypage = layui.laypage;//执行一个laypage实例laypage.render({elem: 'test1' //注意，这里的 test...
form表单中根据值判断是否disabled_layUI表单--乐字节前端
weixin_39559523的博客
11-22 564
表单依赖加载模块：form 在一个容器中设定 class="layui-form" 来标识一个表单元素块 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。 标签区域 原始表单元素区域 输入框 required：注册浏览器所规定的必填字段lay-verify：注册form模块需要验证的类型...
html %3cp%3e字体斜体,icon.html
weixin_34024811的博客
06-03 1261
Simple - 简！ 首页基础框架组件库页面库色彩排版按钮徽标导航面包屑表格表单面板进度条图标前台空页面后台空页面辅助类图标·iconfont图标，展示，装饰Layui内置图标一览表(140个)半星&#xe6c9;layui-icon-rate-half星星-空心&#xe67b;layui-icon-rate星星-实心&#xe67a;layui-i...
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
layui-icon常用记录
丁亚军(Java)
01-20 1万+
<button id="btnPrintDetail" class="layui-btn icon-btn"><i class="layui-icon">&#xe66d;</i>明细打印</button> icon很多，选择起来纷繁复杂，罗列一点常用的，用于自己以后使用~~ 实心 &#xe68f; layui-icon-heart-fill 空心 &#xe68c; layui-icon-heart.
C#使用IconFont字体图标的动态加载（＆#xe格式转换）
MaFeng
12-04 1万+
IconFont 矢量字体图标由于文件小，资源多，可任意放大缩小不失真，方便着色等特点，在网页、Winform、WPF中被广泛使得。网页上介绍使用的文件很多，但动态加载并不多,本文将重点介绍利用C#语言动态加载IconFont 字体，以便显示矢量字体图标。 一、IConFont 基本使用参考 下面两遍文章介绍很详细，相关链接如下： 将IconFont的字体图标库转为图片 WPF自定义控件与样式(......
Iconfont使用方法的详细教程，html怎样引入iconfont
开心大表哥
03-05 5万+
1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车（这一步很简单，就像逛淘宝一样！）； 2.然后就是点击一下购物车，它会出现‘下载代码’的按钮，点击下载保存到本地； 3.接着就是把下载好的文件解压出来，放到项目的css文件夹（方便之后在html中引用）； 4.文件放到项目后，只需要引用iconfont.css这个文件即可； 5.最后一步肯定是调用了...
iShare.js分享插件
weixin_30952535的博客
06-24 227
iShare.js是一个小巧的分享插件，纯JS编写，不依赖任何第三方库，使用简便。 为啥写这个插件？ 因为在搭建个人blog时（还没有搭建好(¯﹃¯)），对目前国内比较受欢迎的分享插件都不太满意，主要如下几点： 不太喜欢官方提供的样式，想重新定制，但又不太方便 提供的大部分接口都没用到，真正用到就那么几个，显得有点冗余 没有进行更新维护，部分接口都是挂掉 另...
demo_unicode.html
mikibiubiu的博客
02-23 404
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" href="demo.css"> <style type="text/cs...
layui页面元素使用（一）
Andy_lau
05-31 3万+
目录：     1.页面元素控件的清单     2.每个控件的使用方法     1.页面元素控件的清单       2.每个控件的使用方法     2.1 字体图标            1） 在内链元素中设置 class="layui-icon" 然后设置图标的Unicode编码即可显示图标，图标的颜色和大小设置方法和css设置字体
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值