头部组件
留意！
AdminLTE 使用所有 Bootstrap 5 组件， 这是一个好的开始。 查看 Bootstrap 文档 以了解 本文档中未涵盖的组件。
Tips!
在你浏览示例页面时，如果想使用某个组件， 则右键单击该组件并选择“检查”， 以便快速查看 HTML。
<!-- Navbar -->
<nav class="app-header navbar navbar-expand bg-body">
<!--begin::Container-->
<div class="container-fluid">
<!-- 导航栏链接开始 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
<i class="bi bi-list"></i>
</a>
</li>
<li class="nav-item d-none d-md-block">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item d-none d-md-block">
<a href="#" class="nav-link">联系</a>
</li>
</ul>
<!-- 导航栏链接结束 -->
<ul class="navbar-nav ms-auto">
<!-- 导航栏搜索 -->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="bi bi-search"></i>
</a>
</li>
<!-- 消息下拉菜单 -->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-chat-text"></i>
<span class="navbar-badge badge text-bg-danger">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item">
<!-- 消息开始 -->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user1-128x128.jpg"
alt="用户头像"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">有时间打电话给我……</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 小时前
</p>
</div>
</div>
<!-- 消息结束 -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- 消息开始 -->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user8-128x128.jpg"
alt="用户头像"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-secondary">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">我收到你的消息了，兄弟</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 小时前
</p>
</div>
</div>
<!-- 消息结束 -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- 消息开始 -->
<div class="d-flex">
<div class="flex-shrink-0">
<img
src="../../../dist/assets/img/user3-128x128.jpg"
alt="用户头像"
class="img-size-50 rounded-circle me-3"
/>
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning">
<i class="bi bi-star-fill"></i>
</span>
</h3>
<p class="fs-7">主题在这里</p>
<p class="fs-7 text-secondary">
<i class="bi bi-clock-fill me-1"></i> 4 小时前
</p>
</div>
</div>
<!-- 消息结束 -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">查看所有消息</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-bs-toggle="dropdown" href="#">
<i class="bi bi-bell-fill"></i>
<span class="navbar-badge badge text-bg-warning">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<span class="dropdown-item dropdown-header">15 条通知</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-envelope me-2"></i> 4 条新消息
<span class="float-end text-secondary fs-7">3 分钟前</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-people-fill me-2"></i> 8 条好友请求
<span class="float-end text-secondary fs-7">12 小时前</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="bi bi-file-earmark-fill me-2"></i> 3 个新报告
<span class="float-end text-secondary fs-7">2 天前</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">
查看所有通知
</a>
</div>
</li>
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="user-image rounded-circle shadow"
alt="User Image"
/>
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!-- User image -->
<li class="user-header text-bg-primary">
<img
src="../../../dist/assets/img/user2-160x160.jpg"
class="rounded-circle shadow"
alt="User Image"
/>
<p>
Alexander Pierce - 网页开发工程师
<small>注册于 2023 年 11 月</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<!--begin::Row-->
<div class="row">
<div class="col-4 text-center">
<a href="#">关注</a>
</div>
<div class="col-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-4 text-center">
<a href="#">好友</a>
</div>
</div>
<!--end::Row-->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<a href="#" class="btn btn-default btn-flat">资料</a>
<a href="#" class="btn btn-default btn-flat float-end">退出</a>
</li>
</ul>
</li>
</ul>
</div>
<!--end::Container-->
</nav>
<!-- /.navbar -->