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

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

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

效果如下：
layUi框架入门篇（二）——布局

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>

但是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>

效果如下：
layUi框架入门篇（二）——布局

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

或者朋友你没有引入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>

在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>

注意以下class： layui-side-scroll

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

最后就是内容部分：

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

iframe教程参考如下：

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

<iframe></iframe>

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

我们看看效果吧：
layUi框架入门篇（二）——布局

最终代码如下：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</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>

    <div class="layui-side layui-bg-black">
        <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>
    </div>

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

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<!--<script src="../src/layui.js"></script>-->
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
</body>
</body>
</html>

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

相关推荐