主侧边栏组件
左侧页面的侧边栏提供了示例:
<!--begin::Sidebar-->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<!--begin::Sidebar Brand-->
<div class="sidebar-brand">
<!--begin::Brand Link-->
<a href="./index.html" class="brand-link">
<!--begin::Brand Image-->
<img
src="./assets/img/AdminLTELogo.png"
alt="AdminLTE Logo"
class="brand-image opacity-75 shadow"
/>
<!--end::Brand Image-->
<!--begin::Brand Text-->
<span class="brand-text fw-light">AdminLTE 4</span>
<!--end::Brand Text-->
</a>
<!--end::Brand Link-->
</div>
<!--end::Sidebar Brand-->
<!--begin::Sidebar Wrapper-->
<div class="sidebar-wrapper">
<nav class="mt-2">
<!--begin::Sidebar Menu-->
<ul
class="nav sidebar-menu flex-column"
data-lte-toggle="treeview"
role="menu"
data-accordion="false"
>
<li class="nav-header">导航栏</li>
<li class="nav-item">
<a href="./index.html" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>1 级</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
树形
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="./index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>
2 级(徽章)
<span
class="nav-badge badge text-bg-secondary me-3"
>
6
</span>
</p>
</a>
</li>
<li class="nav-item">
<a href="./index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>2 级</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="./index.html" class="nav-link active">
<i class="nav-icon bi bi-circle-fill"></i>
<p>1 级激活</p>
</a>
</li>
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon bi bi-circle-fill"></i>
<p>
展开树形菜单
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="./index.html" class="nav-link active">
<i class="nav-icon bi bi-circle"></i>
<p>2 级激活</p>
</a>
</li>
<li class="nav-item">
<a href="./index.html" class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>2 级</p>
</a>
</li>
</ul>
</li>
</ul>
<!--end::Sidebar Menu-->
</nav>
</div>
<!--end::Sidebar Wrapper-->
</aside>
<!--end::Sidebar-->
Alternate Logo
你可以使用两个 LOGO 图像,而不是带有文字的 LOGO,只需要将标记更改为:
<div class="sidebar-brand">
<a href="./index.html" class="brand-link logo-switch">
<img
src="./assets/img/AdminLTELogo.png"
alt="AdminLTE 小 Logo"
class="brand-image-xl logo-xs opacity-75 shadow"
/>
<img
src="./assets/img/AdminLTEFullLogo.png"
alt="AdminLTE 大 Logo"
class="brand-image-xs logo-xl opacity-75"
/>
</a>
</div>