layUi框架入门篇（二）——布局

layui文档layui文档

我是一只蘑菇17

3377人浏览 · 2022-10-20 15:25:41

我是一只蘑菇17 · 2022-10-20 15:25:41 发布

今天我们继续就layUi官网提供的文档来一次后台布局，官网如下：

https://www.layui.com/doc/

   
   
   
   1

效果如下：
在这里插入图片描述

1、
正常的布局大致的内容概括：

<body class="layui-layout-body">
	<div class="layui-header">头部</div>
	<div class="layui-side layui-bg-black">侧边栏</div>
	<div class="layui-body">内容</div>
	<div class="layui-footer">底部</div>
<body>

   
   
   
   1
2
3
4
5
6

但是layUi提供了一个更加方便，更加美观，更加完善的布局

<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">头部</div>
		<div class="layui-side layui-bg-black">侧边栏</div>
		<div class="layui-body">内容</div>
		<div class="layui-footer">底部</div>
	</div>	
<body>

   
   
   
   1
2
3
4
5
6
7
8

效果如下：
在这里插入图片描述

如果代码同上相同的朋友，却没有相同的效果——我放大了 = > =。

或者朋友你没有引入layUi 核心CSS，和JS文件，模块没有载入。

这里我不补充了，你可以看看我的入门篇（一）。

到这里，我们是不是已经算是完成了大半，剩下的只是具体内容，我们可以去layUi文档——导航部分，链接如下：

https://www.layui.com/doc/element/nav.html

里面没有的就是我们的 “后台名称” “头部导航” “用户信息” “侧边栏导航” 这些具体内容

这里我们也可以引用layUi的自带样式功能：
ps：以下内容为简略版

		<div class="layui-logo">后台名称</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">头部导航</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="">用户信息</a></li>
        </ul>

   
   
   
   1
2
3
4
5
6
7

在layUi中导航
水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side

所以侧边栏我们可以添加：

		<div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item"><a href="">侧边栏导航</a></li>
            </ul>
        </div>

   
   
   
   1
2
3
4
5

注意以下class： layui-side-scroll

侧边栏导航的滚轮设置，我们内容超出时，是被hidden的，可以使用滚轴来下移

最后就是内容部分：

可以使用iframe,宽高100%来布满

iframe教程参考如下：

http://www.w3school.com.cn/tags/tag_iframe.asp

<iframe></iframe>

   
   
   
   1

亦可以使用jQuery 的load来载入：
$(“XXX”).load(“XXX.html”)

我们看看效果吧：
在这里插入图片描述

最终代码如下：

ps：引入文件自己注意！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
&lt;link rel="stylesheet" href="layui/css/layui.css"&gt;
&lt;script src="layui/layui.js"&gt;&lt;/script&gt;

</head>
<body class=“layui-layout-body” style=“overflow: hidden”>
<div class=“layui-layout layui-layout-admin”>
<div class=“layui-header”>
<div class=“layui-logo”>layui 后台布局</div>
<ul class=“layui-nav layui-layout-left”>
<li class=“layui-nav-item”><a href=“”>layui文档</a></li>
</ul>
<ul class=“layui-nav layui-layout-right”>
<li class=“layui-nav-item”><a href=“”>layui文档</a></li>
</ul>
</div>

&lt;div class="layui-side layui-bg-black"&gt;
    &lt;div class="layui-side-scroll"&gt;
        &lt;ul class="layui-nav layui-nav-tree"  lay-filter="test"&gt;
            &lt;li class="layui-nav-item"&gt;&lt;a href=""&gt;侧边栏导航&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="layui-body" &gt;
    &lt;!-- 内容主体区域 --&gt;
    &lt;iframe src="https://www.baidu.com/" frameborder="0" height="100%" width="100%"&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;div class="layui-footer"&gt;
    &lt;!-- 底部固定区域 --&gt;
    © layui.com - 底部固定区域
&lt;/div&gt;

</div>
<!–<script src=“…/src/layui.js”></script>–>
<script>
//JavaScript代码区域
layui.use(‘element’, function(){
var element = layui.element;