前言
我又回来辣
虽然并没有人在等我。
做的并不好看。。。。还有一些功能有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