layui学习1（下载引用、布局容器、栅格系统）

1.下载

Layui - 经典开源模块化前端 UI 框架 (ilayuis.com)

官网有学习文档：

Layui 开发使用文档 - 入门指南 (ilayuis.com)

2.什么是layui

layui是一款采用自身模块规范编写前端的UI框架，遵循HTML/CSS/JS的书写和组织形式。

特点：

1.layui属于轻量级框架，简单美观，适合开发后端模式，在服务端页面上有非常好的效果。

2.layui是提供给后端开发人员的ui框架，基于DOM驱动。

3.使用

将下载好的压缩包进行解压，把layui文件复制到项目中。

简单显示hello world

先在head标签里面引入相关文件

<!--  引入LayUI的核心CSS文件  -->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<!--  引入LayUI核心的JS文件  -->
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>

再在body标签中复制官方提供的代码，只需要复制<script></script>标签里面的即可。

<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;

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

4.布局容器

布局容器：
1.固定宽度（两侧有留白效果）
2.完整宽度（占据屏幕宽度的100%）

<!--    <div class="layui-container" style="background-color: #00f7de;height: 300px">-->
<!--        固定宽度-->
<!--    </div>-->
    <div class="layui-fluid" style="background-color:yellow;height: 300px;">
        完整宽度
    </div>

5.栅格系统

5.1栅格系统

栅格系统：
1.定义行 layui-row
2.定义列 layui-col-md*
    md:表示不同屏幕的表示（xs、sm、md、lg）
    *:表示列的数量

3.列的总数不能超过12，否则自动换行

<!--布局容器-->
<div class="layui-container">
<!--定义行-->
    <div class="layui-row">
<!--        定义列-->
        <div class="layui-col-md5" style="background-color:blue;">
            内容的5/12
        </div>
        <div class="layui-col-md7" style="background-color:green;">
            内容的7/12
        </div>
    </div>
    <!--定义行-->
    <div class="layui-row">
        <!--        定义列-->
        <div class="layui-col-md4" style="background-color:pink;">
            内容的5/12
        </div>
        <div class="layui-col-md4" style="background-color:yellow;">
            内容的7/12
        </div>
    </div>
</div>

5.2响应式规则

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

5.3 列边距

layui-col-space*

　　其中*代表px的值（1~30）

设置的是列与列之间的间隙的，所以把相关代码写到row里面

<div class="layui-row layui-col-space10">

注意：以下代码并不能实现显示列边距

原因是背景颜色的问题

<div class="layui-container">
<h3>列边距</h3>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4" style="background-color:pink;">2</div>
        <div class="layui-col-md4" style="background-color:purple;">2</div>
        <div class="layui-col-md4" style="background-color:red;">2</div>
    </div>

</div>

它的实现效果为：

要想实现应该按照以下写法：（把颜色给内容）

<div class="layui-container">
<h3>列边距</h3>
    <div class="layui-row layui-col-space10">
<!--        <div class="layui-col-md4" style="background-color:pink;">2</div>-->
<!--        <div class="layui-col-md4" style="background-color:purple;">2</div>-->
<!--        <div class="layui-col-md4" style="background-color:red;">2</div>-->
        <div class="layui-col-md4" >
            <div style="background-color:pink;">2</div>
        </div>
        <div class="layui-col-md4" >
            <div style="background-color:purple;">2</div>
        </div>
        <div class="layui-col-md4" >
            <div style="background-color:red;">2</div>
        </div>
    </div>

</div>

5.4列偏移

layui-md-offset*

其中*表示偏移的列

<div class="layui-container">
<hr>
    <h3>列偏移</h3>
    <div class="layui-row">
        <div class="layui-col-md4">
            <div style="background-color:pink;">2</div>
        </div>
        <div class="layui-col-md4 layui-col-md-offset4">
            <div style="background-color:#b5fff8;">表示向右移动四列</div>
        </div>
    </div>
</div>

5.5列嵌套

列可以无限嵌套列

6栅格系统.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格系统</title>
<!-- 引入layui核心css文件 -->
  <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body>

<!--
    栅格系统：
        列组合
            1.定义行 layui-row
            2.定义列 layui-col-md*
                md:表示不同屏幕的表示（xs、sm、md、lg）
                *:表示列的数量
            3.列的总数不能超过12，否则自动换行
            4.响应式规则：
                栅格会自动根据屏幕的分辨率选择对应的样式效果
        列边距
            layui-col-space*
                *代表px值（1~30）
        列偏移
            layui-col-md-offset*
                *代表列数
        列嵌套
            列可以无限嵌套列

-->

<!--布局容器-->
<div class="layui-container">
<!--定义行-->
    <div class="layui-row">
<!--        定义列-->
        <div class="layui-col-md5" style="background-color:blue;">
            内容的5/12
        </div>
        <div class="layui-col-md7" style="background-color:green;">
            内容的7/12
        </div>
    </div>
    <!--定义行-->
    <div class="layui-row">
        <!--        定义列-->
        <div class="layui-col-md4" style="background-color:pink;">
            内容的5/12
        </div>
        <div class="layui-col-md4" style="background-color:yellow;">
            内容的7/12
        </div>
    </div>

<hr>
<h3>列边距</h3>
    <div class="layui-row layui-col-space10">
<!--        <div class="layui-col-md4" style="background-color:pink;">2</div>-->
<!--        <div class="layui-col-md4" style="background-color:purple;">2</div>-->
<!--        <div class="layui-col-md4" style="background-color:red;">2</div>-->
        <div class="layui-col-md4" >
            <div style="background-color:pink;">2</div>
        </div>
        <div class="layui-col-md4" >
            <div style="background-color:purple;">2</div>
        </div>
        <div class="layui-col-md4" >
            <div style="background-color:red;">2</div>
        </div>
    </div>
<hr>
    <h3>列偏移</h3>
    <div class="layui-row">
        <div class="layui-col-md4">
            <div style="background-color:pink;">2</div>
        </div>
        <div class="layui-col-md4 layui-col-md-offset4">
            <div style="background-color:#b5fff8;">表示向右移动四列</div>
        </div>
    </div>

<hr>
    <h3>列嵌套</h3>
</div>
</body>
</html>

View Code点击查看代码

posted on 2023-04-18 18:53 201812 阅读(202) 评论(0) 编辑收藏举报

layui学习1（下载引用、布局容器、栅格系统）

1.下载

2.什么是layui

3.使用

4.布局容器

5.栅格系统

5.1栅格系统

5.2响应式规则

5.3 列边距

5.4列偏移

5.5列嵌套

6栅格系统.html

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论