Bootstrap 提供了一个简单易用的导航栏组件，可以帮助我们快速构建具有响应式设计的导航栏。导航栏通常用于网站的顶部，用来显示网站的主要导航链接。
创建一个基本的导航栏
要创建一个基本的导航栏，我们可以使用 nav 和 navbar 类来定义导航栏的基本结构。以下是一个简单的示例代码：
---- ------------- ----------------
---- ------------------
---- ----------------------
-- -------------------- -----------------
------
--- ---------- ------------
------ ----------------------
------ -----------------------
------ --------------------------
------ -------------------------
-----
------
------在这个示例中，我们使用了 navbar 和 navbar-default 类来定义一个基本的导航栏。navbar-header 类用来包含导航栏的标题，而 navbar-brand 类用来定义导航栏的品牌/logo。nav 和 navbar-nav 类用来定义导航链接的样式。
响应式导航栏
Bootstrap 的导航栏还支持响应式设计，可以在小屏幕设备上自动折叠成一个按钮，点击按钮后展开导航链接。要创建一个响应式导航栏，我们可以使用 navbar-toggle 类和 data-toggle="collapse" 属性来定义导航栏的折叠按钮。
以下是一个响应式导航栏的示例代码：
---- ------------- ----------------
---- ------------------
---- ----------------------
------- ------------- --------------------- ---------------------- ------------------------
----- ------------------------
----- ------------------------
----- ------------------------
---------
-- -------------------- -----------------
------
---- --------------- ---------------- --------------
--- ---------- ------------
------ ----------------------
------ -----------------------
------ --------------------------
------ -------------------------
-----
------
------
------在这个示例中，我们使用了 navbar-toggle 类和 data-toggle="collapse" 属性来定义一个折叠按钮。当屏幕宽度较小时，导航栏会自动折叠成一个按钮，点击按钮后展开导航链接。
定制导航栏样式
除了默认的导航栏样式外，Bootstrap 还提供了许多定制样式供我们选择。我们可以通过添加不同的类来改变导航栏的颜色、背景、字体等样式。
以下是一个定制导航栏样式的示例代码：
---- ------------- ----------------
---- ------------------
---- ----------------------
-- -------------------- -----------------
------
--- ---------- ------------
------ ----------------------
------ -----------------------
------ --------------------------
------ -------------------------
-----
------
------在这个示例中，我们使用了 navbar-inverse 类来定义一个黑色背景的导航栏。我们还可以使用其他类来定义不同颜色的导航栏，如 navbar-default、navbar-primary、navbar-success 等。
通过以上示例，我们可以看到 Bootstrap 导航栏的基本用法和一些定制样式的应用。希望这部分内容能够帮助你更好地了解和使用 Bootstrap 导航栏组件。