提交 42807bcd 编写于 作者: Y yuenblue

demo navbar

上级 e12424be
......@@ -3,11 +3,11 @@
<head>
<meta charset="utf-8">
<title>Offcanvas</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="Offcanvas.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>
<script type="text/javascript" src="../../demoadmin/layout/layout-mobile.js"></script>
<link href="../../../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../Offcanvas.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>
<script type="text/javascript" src="../../../demoadmin/layout/layout-mobile.js"></script>
</head>
<body>
......
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="../../../node_modules/bootstrap/dist/css/bootstrap.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>
<nav class="navbar navbar-expand-md fixed-top bg-primary" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</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">Offcanvas</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 active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<!--
<li>
<hr class="dropdown-divider">
</li>
-->
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex py-1" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
</body>
</html>
@charset "utf-8";
/* CSS Document */
article {
width: 80%;
margin: 0 auto;
}
ul {
list-style-position: inside;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<article>
<p>这是布局 P 标签的内容</p>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>
aaa
<ul>
<li>bbbb
<ul>
<li>eee</li>
<li>eee</li>
<li>eee
<ul>
<li>fff</li>
<li><input type="checkbox">fff</li>
<li>fff</li>
<li>fff</li>
</ul>
</li>
<li>eee</li>
</ul>
</li>
<li>cccc</li>
<li>cccc</li>
<li>cccc</li>
<li>cccc</li>
</ul>
</li>
</ul>
</article>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册