在这基础上加上导航栏

在原有的基础之上加入Bootstrap的导航栏，你可以按照以下步骤操作：

首先，在HTML文件顶部添加头部部分，包括导航栏：

<header class="navbar navbar-expand-lg navbar-light bg-light">
    <nav class="container">
        <a class="navbar-brand" href="#">购物商城</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#products">产品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">关于我们</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" id="navbarDropdown" aria-haspopup="true" aria-expanded="false">
                        账户
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">登录</a>
                        <a class="dropdown-item" href="#">注册</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
</header>

这里我们创建了一个固定大小的导航栏，并包含了“首页”，“产品”，“关于我们”以及下拉菜单式的账户选项。

接下来，更新CSS以适应导航栏：

.navbar {
  z-index: 1; /* 提高定位以覆盖其他元素 */
}

/* 可选的：给下拉菜单设置动画效果 */
.dropdown-menu {
  animation: fadeIn ease-in-out 0.2s;
}

现在你的页面就有了顶部导航栏。记得在实际项目中替换掉`#home`, `#products`, 和 `#about`为对应的路由地址。