Bootstrap 是目前最为流行的前端框架之一，提供了丰富的组件和样式，其中导航条（Navbar）是常用的组件之一。它可以快速帮助开发者搭建出漂亮的网站导航，并且具有很强的可定制性。
基础使用
Bootstrap 的导航条由 nav 和 navbar 两个 class 构成，其中 nav 表示导航栏的基本样式，而 navbar 则包含了整个导航条的布局和组件。
<nav class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<ul class="nav">
<li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link</a></li>
</ul>
</nav>上面的代码定义了一个简单的导航条，其中包含了一个品牌 Logo 和三个链接。我们可以看到，这个导航条使用了 navbar 和 nav 两个 class，并且内部的组件也分别使用了 navbar-brand、nav-item 和 nav-link 这些 class。
在上面的代码中，我们还可以看到一个 active class。这个 class 用于表示当前选中的链接，可以将其添加到相应的 li 元素上。
导航条形态
Bootstrap 的导航条提供了多种形态，包括默认样式、固定在页面顶部或底部、响应式等。下面我们来一一介绍。
默认样式
Bootstrap 的导航条默认是水平排列，并且不具备滚动条。如果导航条中的链接过多，可以使用下拉菜单或者滚动条等方式来处理。
固定导航条
固定导航条指的是将导航条固定在页面顶部或底部，不随页面滚动而移动。可以通过添加 fixed-top 或者 fixed-bottom class 来实现。
<nav class="navbar fixed-top"> ... </nav> <nav class="navbar fixed-bottom"> ... </nav>
响应式导航条
在移动设备或者小屏幕上，传统的水平排列导航条可能会占据过多的空间，影响用户体验。此时，可以使用 Bootstrap 的响应式导航条，将导航条变成一个下拉菜单，方便用户选择。
-- -------------------- ---- -------
---- ------------- ------------------
------- ---------------------- ------------- ---------------------- -----------------------------
----- -----------------------------------
---------
---- --------------- ---------------- -------------------
--- -------------------
--- --------------- ---------- -------- ------------------------------
--- ------------------- -------- ------------------------------
--- ------------------- -------- ------------------------------
-----
------
------上面的代码定义了一个响应式导航条，其中使用了 navbar-expand-sm class 表示在小屏幕下自动折叠。同时，在导航条左侧还加入了一个按钮，用于展开或者收起导航条。
总结
Bootstrap 的导航条提供了丰富的样式和布局，可以快速帮助开发者构建出漂亮的网站导航。除了基本的水平排列导航条之外
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2298