在网页开发中，导航栏是几乎所有站点的标配。如果只用原生CSS，我们需要处理横向排列、间距、悬停效果和移动端折叠；而借助Bootstrap Navbar，大部分样式和交互都被封装好，只需按结构写标签即可。下面先看一个基础示例图。
一、纯CSS快速创建导航栏的常用方法
不使用框架时，最快捷的方式是利用flex布局让导航项横向排布，并用少量代码实现基础响应式。
/* 使用flex快速横向导航 */
.nav {
display: flex;
list-style: none;
padding: 0;
margin: 0;
background: #f5f5f5;
}
.nav li {
padding: 12px 20px;
}
.nav li:hover {
background: #ddd;
}
对应的HTML结构如下：
<ul class="nav"> <li>首页</li> <li>文章</li> <li>关于</li> </ul>
二、使用Bootstrap Navbar简化开发
Bootstrap Navbar 是框架提供的导航组件，自带响应式折叠、品牌区和下拉支持。引入Bootstrap CSS后，按官方结构书写即可。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">站点名</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">文章</a></li>
</ul>
</div>
</nav>
上述代码中，navbar-expand-lg 控制大屏展开、小屏折叠，避免了手写媒体查询。若需修改配色，覆写 bg-light 相关变量即可。
三、两种方案对比
| 方式 | 开发速度 | 定制成本 | 适用场景 |
|---|---|---|---|
| 纯CSS | 较慢 | 低 | 简单页、学习练习 |
| Bootstrap Navbar | 快 | 中 | 后台、企业站快速成型 |
四、小结
如果追求极致轻量可用纯CSS flex方案；若希望减少调试时间，Bootstrap Navbar是更实用的选择。理解 navbar-collapse 的折叠逻辑，就能在多数项目中直接复用。
CSS Bootstrap_Navbar 导航栏修改时间：2026-07-27 05:21:18