Layui常用功能整理

Posted 大忽悠爱忽悠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Layui常用功能整理相关的知识,希望对你有一定的参考价值。

Layui常用功能整理


官网链接

Layui官网

这里只对功能做简单记录,具体使用见官方文档


布局容器

固定宽度(两侧有留白效果)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" type="text/css" href="js/layui.css">
	</head>
	<body>
		 <!-- 固定宽度(两侧有留白效果)  -->
		<div class="layui-container" style="background-color: #00F7DE; ">
			大忽悠
		</div>
	</body>
</html>


完整宽度(占据屏幕宽度100%)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" type="text/css" href="js/layui.css">
	</head>
	<body>
		<div class="layui-fluid" style="background-color: #00F7DE; height: 60px;">
			大忽悠
		</div>
	</body>
</html>


栅格系统

栅格系统

1.定义行 .layui-row

2 . 定义列  .layui-col-md*

md表示不同屏幕的标识(xs,sm,md,lg)

*表示列的数量

3.每一行被均分为12列,列的总数不能超过12列,否则会自动换行

4.响应式规则

栅格会自动根据屏幕的分辨率选择对应的样式效果

使用案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	</head>
	<body>
<div class="layui-container">  
  <div class="layui-row">
    <div class="layui-col-md9" style="background-color: #00F7DE;">
      你的内容 9/12
    </div>
    <div class="layui-col-md3" style="background-color: red;">
      你的内容 3/12
    </div>
	<div class="layui-col-md3" style="background-color: red;">
	  你的内容 3/12
	</div>
  </div>
</div>
	</body>
</html>

超过一行的内容会分配到下一行


响应式规则

设置在不同屏幕上的表现形式
class="layui-col-xs6 layui-col-sm6 layui-col-md4"
<div class="layui-container">     
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动:6/12 | 平板:6/12 | 桌面:4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移动:6/12 | 平板:6/12 | 桌面:4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      移动:4/12 | 平板:12/12 | 桌面:4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      移动:4/12 | 平板:7/12 | 桌面:8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      移动:4/12 | 平板:5/12 | 桌面:4/12
    </div>
  </div>
</div>

列边距—设置范围 1 ~ 30 px

layui-col-space*
*代表的是px值,默认范围是1-30
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	</head>
	<body>
<div class="layui-container">  
<h1>列边距</h1>
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md9">
      <div style="background-color: red;">你的内容 9/12</div>
    </div>
    <div class="layui-col-md3">
       <div style="background-color: red;">你的内容 3/12</div>
    </div>
  </div>
</div>
	</body>
</html>


列偏移—范围超过30px,建议使用列偏移

将列向右移动指定列数
layui-col-md-offset* 
*代表向右移动指定列数
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	</head>
	<body>
<div class="layui-container">  
<h1>列边距</h1>
  <div class="layui-row">
    <div class="layui-col-md3">
      <div style="background-color: red;">你的内容 3/12</div>
    </div>
	<!-- 向右移动4列 -->
    <div class="layui-col-md3  layui-col-md-offset4">
       <div style="background-color: red;">你的内容 3/12</div>
    </div>
  </div>
</div>
	</body>
</html>


列嵌套—列之间可以无限嵌套列

<div class="layui-container">  
<!-- 列边距为5px -->
     <div class="layui-row layui-col-space5">
       <div class="layui-col-md5" style="background-color: black;">
		   <!-- 列嵌套 ,对当前只占有5列的列再分12份-->
         <div class="layui-row grid-demo">
           <div class="layui-col-md3" style="background-color: #00F7DE;">
             内部列
           </div>
           <div class="layui-col-md6" style="background-color: #1E9FFF;">
             内部列
           </div>
         </div>
       </div>
</div>


按钮

这部分内容比较简单,具体设置可以参考官方文档,这里只会列举较难理解的几种操作

以官方文档为主

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

基本用法

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>


流体按钮(最大化铺满当前容器或者页面)

<div class="layui-container">  
<button type="button" class="layui-btn layui-btn-fluid">流体按钮(最大化适应固定宽度的容器)</button>
</div>
<div class="layui-fluid">  
<button type="button" class="layui-btn layui-btn-fluid layui-btn-normal">流体按钮(最大化适应完整宽度的容器)</button>
</div>
<button type="button" class="layui-btn layui-btn-fluid layui-btn-warm">流体按钮(最大化适应完整当前页面)</button><button type="button" class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button>


图标按钮

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon layui-icon-heart" style="font-size: 30px; color: #FFB800;"></i> 关注 
</button>


图标目前设置有两种方式

图标大全

<i class="layui-icon layui-icon-face-smile"></i>  
或者
<i class="layui-icon">&#xe60c;</i>  

导航

依赖加载模块:element

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

参数解释

class="layui-nav" :表示当前div是一个导航
class="layui-nav-item" :表示当前li是当前导航的一个选项 
lay-filter="" : 过滤事件
layui-this :表示当前被选中的一个li标签,会有对应的选择状态
<dl class="layui-nav-child"> :设置二级菜单

演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui学习之路</title>
		<!-- 引入Layui核心css文件 -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	</head>
	<body> 

<ul class="layui-nav" lay-filter="">
  <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">
    常用python日期日志获取内容循环的代码片段

layui常用弹窗

小程序各种功能代码片段整理---持续更新

layui小功能整理

C#常用代码片段备忘

Visual Studio Code 常用插件整理