Flask+ZUI 开发小型工具网站（四）——ZUI 前端主页面 tabs

最新推荐文章于 2024-06-15 12:50:31 发布

lanlan_bupt

最新推荐文章于 2024-06-15 12:50:31 发布

阅读量912

点赞数

分类专栏： Flask+ZUI 小型工具网站文章标签： ZUI

本文链接：https://blog.csdn.net/qq_36591505/article/details/102718830

版权

本文介绍了使用Flask和ZUI框架开发小型工具网站时，如何创建并实现ZUI前端主页面的tabs功能。包括tabs文件的引入、布局容器、顶部navbar、页面左右布局、menu和tabs标签页管理器的详细步骤，以及缩进菜单的实现效果。

摘要由CSDN通过智能技术生成

前言

我又回来辣

虽然并没有人在等我。

做的并不好看。。。。还有一些功能有bug，但是有点没动力了，画个阶段激励一下自己

效果：

整体是这样的，index的首页放了一只皮卡丘，皮卡丘爱你哦~

蓝后，这只是个板板，木有后台数据我也没加主页登录判定，连左边的面板都是写死的没有用json动态导入呜呜呜。。我好菜啊，回来再改吧。

结构

康康目录：

主页用到的就是这三个文件，其它的乱七八糟的还没弄好先放着回来再说。。。

代码

反正没人看。。一个个来，完整代码不放了以后可以找我要，反正我现在也还没写完

tabs文件引入

首先 tabs 标签页管理器的js，标签管理器要引入额外的css和js，不包含在<link rel="stylesheet" href="../static/dist/css/zui.min.css">里面。

css

<link rel="stylesheet" href="../static/dist/lib/tabs/zui.tabs.css">

js

<script src="../static/dist/lib/tabs/zui.tabs.js"></script>

布局容器

然后开始在body里面包一个布局容器，ZUI提供了三种布局容器，这个container-fluid是宽和高都占页面100%的一种

no-padding是去除了这个容器的边框，使它跟页面紧贴住

<body>

<!--布局容器-->
<div class="container-fluid no-padding">



</div>
<body>

顶部navbar

顶部放了一个长长的navbar，使用navbar-fixed-top类让它紧贴在最上头。

然后画了个图做logo，我用axure画的图嘻嘻，画完保存页面为图片，我觉得我真的懒到家了。

以下代码，为了控制logo和标题的位置我做了一些神奇的操作。。右边两个按钮没啥用，因为我还没想好右边要放啥，直接copy了ZUI上面的例子。

<!--顶部方块栏-->
<nav class="navbar bg-primary navbar-fixed-top" role="navigation" style="width: 100%; height:60px;">
        <div class="container">
            <div class="row">
                <div class="col col-lg-6  col-md-6 col-sm-6 col-xs-9">
                    <!--标头-->
                    <div class="row">
                        <div class="col col-lg-2  col-md-2 col-sm-3 col-xs-3">
                            <img class="logo" src="../static/photos/logo.png">
                        </div>
                        <div class="col col-lg-10  col-md-10 col-sm-9 col-xs-9" style="margin:15px 0px 0px;">
                            <span style="font-size:20px;">友谱网络数据标注工具</span>
                        </div>
                    </div>
                </div>
                <!--右侧导航项目-->
                <ul class="nav navbar-nav navbar-right" style="margin:10px 0px 0px;">
                    <li><a href="your/nice/url"><i class

最低0.47元/天解锁文章

lanlan_bupt

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Flask+ZUI 开发小型工具网站（四）——ZUI 前端主页面 tabs

前言我又回来辣虽然并没有人在等我。做的并不好看。。。。还有一些功能有bug，但是有点没动力了，画个阶段激励一下自己效果：整体是这样的，index的首页放了一只皮卡丘，皮卡丘爱你哦~蓝后，这只是个板板，木有后台数据我也没加主页登录判定，连左边的面板都是写死的没有用json动态导入呜呜呜。。我好菜啊，回来再改吧。结构康康目录：主页用到的就是这三个文件，其它的...
复制链接

扫一扫

专栏目录