提交 7d30b372 编写于 作者: Y yuenblue

No commit message

No commit message
上级 724239c3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
<div id="container-wrap" class="d-flex flex-column">
<nav class="navbar navbar-expand-lg border-bottom sticky-top">
<div class="container-fluid"> <a class="navbar-brand" href="#">CmsDemo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"> <span class="navbar-toggler-icon"></span> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">导航</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body align-items-center">
<ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
<li class="nav-item"> <a class="nav-link" aria-current="page" href="#">首页</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 栏目 </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">概览</a></li>
<li><a class="dropdown-item" href="#">添加栏目</a></li>
</ul>
</li>
<li class="nav-item dropdown "> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 文档 </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">概览</a></li>
<li><a class="dropdown-item" href="#">发布文档</a></li>
<li><a class="dropdown-item" href="#">待审核</a></li>
<li><a class="dropdown-item" href="#">回收站</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 附件 </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">概览</a></li>
<li><a class="dropdown-item" href="#">上传附件</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 用户 </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">用户列表</a></li>
<li><a class="dropdown-item" href="#">添加用户</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 设置 </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">概览</a></li>
</ul>
</li>
</ul>
<form class="d-flex py-1" role="search">
<input class="form-control me-2" type="search" placeholder="请输入关键字" aria-label="Search">
<button class="btn btn-info text-nowrap text-white" type="submit">搜索</button>
</form>
<ul class="navbar-nav pe2">
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle nav-link-icon position-relative" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">消息 <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">0</span></a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">概览</a></li>
<li><a class="dropdown-item" href="#">上传附件</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 用户名Abc </a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">概览</a></li>
<li><a class="dropdown-item" href="#">上传附件</a></li>
</ul>
</li>
<!--
<li class="nav-item dropdown-center">
<button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> 用户名Aa </button>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
<li><a class="dropdown-item" href="#">设置</a></li>
<li><a class="dropdown-item" href="#">退出</a></li>
</ul>
</li>
-->
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid flex-grow-1" id="container-main">
<div class="row">
<aside class="col-auto">
<ul>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
</ul>
</aside>
<main class="col">
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
</main>
</div>
</div>
</div>
<!-- <div class="container-fluid text-center text-black-50">此处显示新 Div 标签的内容</div>-->
</body>
</html>
@charset "utf-8";
/* CSS Document */
.nav-link-icon{}
.nav-link-icon::after{
display: none;
}
body{
overflow-y: hidden;
}
#container-main {
}
#container-main main {
height: calc(100vh - 62px);
overflow-y: scroll;
}
#container-wrap {
}
@media screen and (max-width:992px){
#container-main aside{
display: none;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-expand-lg border-bottom sticky-top">
<div class="container-fluid"> <a class="navbar-brand" href="#">CmsDemo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"> <span class="navbar-toggler-icon"></span> </button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">导航</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body align-items-center">
<ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
<li class="nav-item"> <a class="nav-link" aria-current="page" href="#">首页</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 栏目 </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">概览</a></li>
<li><a class="dropdown-item" href="#">添加栏目</a></li>
</ul>
</li>
<li class="nav-item dropdown "> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 文档 </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">概览</a></li>
<li><a class="dropdown-item" href="#">发布文档</a></li>
<li><a class="dropdown-item" href="#">待审核</a></li>
<li><a class="dropdown-item" href="#">回收站</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 附件 </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">概览</a></li>
<li><a class="dropdown-item" href="#">上传附件</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 用户 </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">用户列表</a></li>
<li><a class="dropdown-item" href="#">添加用户</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 设置 </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">概览</a></li>
</ul>
</li>
</ul>
<form class="d-flex py-1" role="search">
<input class="form-control me-2" type="search" placeholder="请输入关键字" aria-label="Search">
<button class="btn btn-info text-nowrap text-white" type="submit">搜索</button>
</form>
<ul class="navbar-nav pe2">
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle nav-link-icon position-relative" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">消息 <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">0</span></a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">概览</a></li>
<li><a class="dropdown-item" href="#">上传附件</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 用户名Abc </a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">概览</a></li>
<li><a class="dropdown-item" href="#">上传附件</a></li>
</ul>
</li>
<!--
<li class="nav-item dropdown-center">
<button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> 用户名Aa </button>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
<li><a class="dropdown-item" href="#">设置</a></li>
<li><a class="dropdown-item" href="#">退出</a></li>
</ul>
</li>
-->
</ul>
</div>
</div>
</div>
</nav>
<div class="container-fluid" id="container-main">
<div class="row">
<aside class="col-auto">
<ul>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
</ul>
</aside>
<main class="col">
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
<div>此处显示新 Div 标签的内容</div>
</main>
</div>
</div>
<!-- <div class="container-fluid text-center text-black-50">此处显示新 Div 标签的内容</div>-->
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册