No commit message

No commit message

No commit message
559e406b · yuenblue · 8e63fbc9 · 559e406b · 559e406b
隐藏空白更改
内联并排

Showing with 69 addition and 23 deletion

Bootstrap-v5/Components/navbar/navbar.css Bootstrap-v5/Components/navbar/navbar.css +7 -0

Bootstrap-v5/Components/navbar/navbar.html Bootstrap-v5/Components/navbar/navbar.html +62 -23

未找到文件。
--- a/Bootstrap-v5/Components/navbar/navbar.css
+++ b/Bootstrap-v5/Components/navbar/navbar.css
+@charset "utf-8";
+/* CSS Document */
+.nav-link-icon{}
+.nav-link-icon::after{
+	display: none;
+}
--- a/Bootstrap-v5/Components/navbar/navbar.html
+++ b/Bootstrap-v5/Components/navbar/navbar.html
@@ -4,50 +4,89 @@
 <meta charset="utf-8">
 <title>无标题文档</title>
 <link href="../../../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
+<link href="navbar.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">
+<nav class="navbar navbar-expand-lg fixed-top border-bottom">
-  <div class="container-fluid">
+  <div class="container-fluid"> <a class="navbar-brand" href="#">CmsDemo</a>
-    <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>
-    <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>
+        <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">
+          <li class="nav-item"> <a class="nav-link" aria-current="page" href="#">首页</a> </li>
-            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 栏目 </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="#">概览</a></li>
-              <li><a class="dropdown-item" href="#">Another action</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-auto-close="outside" data-bs-toggle="dropdown" aria-expanded="false"> 文档 </a>
+            <ul class="dropdown-menu show">
+              <li><a class="dropdown-item active" 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>
+              <!--
              <li>
                <hr class="dropdown-divider">
              </li>
 -->
-              <li><a class="dropdown-item" href="#">Something else here</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="Search" aria-label="Search">
+          <input class="form-control me-2" type="search" placeholder="请输入关键字" aria-label="Search">
-          <button class="btn btn-outline-success" type="submit">Search</button>
+          <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>