引言
Bootstrap 4 是一个流行的前端框架，它提供了一套简洁、灵活的组件，帮助开发者快速构建响应式网站。其中，导航栏（Navbar）是网站中常见的组件之一，用于引导用户浏览不同页面。本文将详细介绍如何使用 Bootstrap 4 创建导航栏，并进行样式调整，从基础搭建到自定义样式优化，帮助你全面掌握导航栏的使用。
1. Bootstrap 4 导航栏基础搭建
1.1 引入 Bootstrap 4
首先，你需要在 HTML 文件中引入 Bootstrap 4 的 CSS 和 JavaScript 文件。可以通过 CDN 链接快速引入：

1.2 创建基础导航栏
Bootstrap 4 的导航栏使用
.navbar
类来创建。以下是一个基础的导航栏示例：

代码解析：
navbar
: 基础类，用于创建导航栏容器。
navbar-expand-lg
: 控制导航栏在不同屏幕尺寸下的展开行为。
lg
表示在大屏幕（≥992px）上展开，小屏幕上折叠。
navbar-light
和
bg-light
: 设置导航栏的背景和文本颜色。
navbar-light
用于浅色背景，
bg-light
设置背景为浅灰色。
navbar-brand
: 用于品牌标识，通常放置网站 Logo 或名称。
navbar-toggler
: 移动端的折叠按钮，通过
data-toggle=”collapse”
和
data-target
控制导航菜单的显示。
collapse navbar-collapse
: 导航菜单的容器，通过 ID 与折叠按钮关联。
navbar-nav
和
nav-item
: 导航菜单的列表结构，
nav-item
是列表项，
nav-link
是链接。
active
: 表示当前激活的导航项。
1.3 响应式导航栏
Bootstrap 4 的导航栏默认是响应式的。通过
navbar-expand-*
类可以控制在不同屏幕尺寸下的行为：
navbar-expand-sm
: 在小屏幕（≥576px）上展开，更小屏幕上折叠。
navbar-expand-md
: 在中等屏幕（≥768px）上展开。
navbar-expand-lg
: 在大屏幕（≥992px）上展开。
navbar-expand-xl
: 在超大屏幕（≥1200px）上展开。
navbar-expand
: 始终展开，不折叠。
例如，使用
navbar-expand-md
：

2. 导航栏的常见变体
2.1 深色主题导航栏
使用
navbar-dark
和深色背景类（如
bg-dark
、
bg-primary
）创建深色主题导航栏：

2.2 带有表单的导航栏
可以在导航栏中嵌入表单元素，例如搜索框：

2.3 固定顶部导航栏
使用
fixed-top
或
sticky-top
类使导航栏固定在页面顶部：

fixed-top
: 导航栏固定在页面顶部，不随滚动条移动。
sticky-top
: 导航栏在滚动到顶部时固定，滚动时跟随页面。
2.4 导航栏中的下拉菜单
在导航栏中添加下拉菜单：

3. 自定义导航栏样式
虽然 Bootstrap 4 提供了丰富的样式，但有时我们需要根据品牌需求进行自定义。以下是一些常见的自定义方法。
3.1 修改导航栏背景和文本颜色
通过自定义 CSS 覆盖 Bootstrap 的默认样式。例如，将导航栏背景改为自定义颜色：
/* 自定义导航栏背景 */
.custom-navbar {
background-color: #4a6fa5 !important; /* 自定义蓝色 */
}

/* 自定义文本颜色 */
.custom-navbar .navbar-brand,
.custom-navbar .nav-link {
color: #ffffff !important; /* 白色文本 */
}

/* 悬停效果 */
.custom-navbar .nav-link:hover {
color: #ffcc00 !important; /* 黄色悬停 */
}
在 HTML 中添加自定义类：

3.2 调整导航栏高度
默认导航栏高度可能不符合设计需求，可以通过 CSS 调整：
/* 调整导航栏高度 */
.custom-navbar {
padding: 0.5rem 1rem; /* 减少内边距 */
}

/* 调整品牌和链接的内边距 */
.custom-navbar .navbar-brand,
.custom-navbar .nav-link {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
3.3 添加阴影和边框
为导航栏添加阴影或边框以增强视觉效果：
/* 添加底部阴影 */
.custom-navbar {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 添加顶部边框 */
.custom-navbar {
border-top: 3px solid #ffcc00;
}
3.4 自定义折叠动画
Bootstrap 4 默认使用折叠动画，但可以通过 CSS 调整动画速度或效果：
/* 调整折叠动画速度 */
.collapse {
transition: height 0.3s ease; /* 默认是 0.35s */
}

/* 自定义折叠动画 */
.collapse.show {
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
3.5 响应式自定义样式
使用媒体查询针对不同屏幕尺寸调整样式：
/* 小屏幕（手机）上的自定义样式 */
@media (max-width: 576px) {
.custom-navbar .navbar-brand {
font-size: 1.2rem;
}

.custom-navbar .nav-link {
padding: 0.5rem 0.25rem;
font-size: 0.9rem;
}
}

/* 大屏幕上的自定义样式 */
@media (min-width: 992px) {
.custom-navbar .nav-link {
padding: 0.75rem 1.5rem;
font-size: 1.1rem;
}
}
4. 高级自定义：使用 SASS 进行深度定制
Bootstrap 4 支持 SASS 预处理器，允许你通过变量和混合宏进行深度定制。这是最灵活的自定义方式。
4.1 安装 SASS
首先，确保你的开发环境支持 SASS。你可以使用 npm 安装：
npm install -g sass
4.2 创建自定义 SASS 文件
创建一个自定义的 SASS 文件（例如
custom.scss
），并导入 Bootstrap 的 SASS 文件：
// 导入 Bootstrap 的 SASS 文件
@import “node_modules/bootstrap/scss/bootstrap”;

// 自定义变量
$primary: #4a6fa5; // 修改主色
$secondary: #ffcc00; // 修改次色
$navbar-light-color: #ffffff; // 导航栏文本颜色
$navbar-light-hover-color: #ffcc00; // 导航栏悬停颜色
$navbar-light-active-color: #ffcc00; // 导航栏激活颜色
$navbar-padding-y: 0.5rem; // 导航栏垂直内边距

// 自定义导航栏样式
.navbar-custom {
@extend .navbar-dark;
background-color: $primary;

.navbar-brand {
font-weight: bold;
letter-spacing: 1px;
}

.nav-link {
transition: all 0.3s ease;

&:hover {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
}
}
4.3 编译 SASS 文件
使用 SASS 编译器将
custom.scss
编译为 CSS 文件：
sass custom.scss custom.css
然后在 HTML 中引入编译后的 CSS 文件： 4.4 使用自定义类
在 HTML 中使用自定义类：

5. 实战案例：创建一个完整的响应式导航栏
5.1 案例需求
创建一个包含以下功能的导航栏：
品牌 Logo
导航链接（首页、产品、服务、关于）
下拉菜单（更多选项）
搜索框
固定顶部
深色主题
自定义样式
5.2 完整代码示例

5.3 代码解析
结构
：使用
.container
类使导航栏内容居中，与页面内容对齐。
固定顶部
：使用
fixed-top
类固定导航栏。
自定义样式
：通过内联 CSS 定义了深色主题、悬停效果、下拉菜单样式等。
响应式设计
：在小屏幕上，导航链接和搜索框会垂直堆叠，下拉菜单也会适应小屏幕。
品牌 Logo
：使用占位符图片作为 Logo 示例，实际使用时替换为真实图片。
6. 常见问题与解决方案
6.1 导航栏在移动端不显示折叠按钮
问题
：在小屏幕上，导航栏没有显示折叠按钮，菜单直接展开。
原因
：可能没有正确设置
navbar-expand-*
类，或者 JavaScript 文件未正确引入。
解决方案
：
确保使用了
navbar-expand-*
类（如
navbar-expand-lg
）。
检查是否引入了 Bootstrap 的 JavaScript 文件和 jQuery（Bootstrap 4 依赖 jQuery）。
确保
data-toggle=”collapse”
和
data-target
属性正确设置。
6.2 导航栏遮挡页面内容
问题
：固定导航栏遮挡了页面顶部内容。
解决方案
：为页面内容添加顶部内边距，高度至少等于导航栏高度：
body {
padding-top: 56px; /* 根据导航栏高度调整 */
}
或者使用 Bootstrap 的
fixed-top
类时，添加以下 CSS：
body {
padding-top: 56px;
}
6.3 自定义样式不生效
问题
：自定义 CSS 没有覆盖 Bootstrap 的默认样式。
解决方案
：
使用
!important
谨慎覆盖（不推荐过度使用）。
确保自定义 CSS 在 Bootstrap CSS 之后引入。
使用更具体的选择器，例如
.navbar-custom .nav-link
而不是
.nav-link
。
6.4 下拉菜单在小屏幕上显示异常
问题
：在小屏幕上，下拉菜单可能显示不全或位置错误。
解决方案
：
使用 Bootstrap 的
dropdown-menu-right
类使下拉菜单右对齐。
调整下拉菜单的
z-index
值，确保它在其他元素之上：
.dropdown-menu {
z-index: 1000;
}
7. 总结
本文详细介绍了 Bootstrap 4 导航栏的创建、常见变体、自定义样式方法以及高级 SASS 定制。通过基础搭建、样式调整和实战案例，你可以快速掌握导航栏的使用。记住，Bootstrap 4 的导航栏是响应式的，通过
navbar-expand-*
类可以灵活控制不同屏幕尺寸下的行为。自定义样式时，建议使用 SASS 进行深度定制，以保持代码的可维护性。
最后，提供一个完整的代码示例，你可以直接复制使用并根据需求进行修改。希望这篇指南能帮助你更好地使用 Bootstrap 4 导航栏，创建出美观、实用的网站导航。