对于navbar,字体颜色和背景颜色如何更改?
要更改你 Bootstrap 导航栏(navbar)的字体颜色和背景颜色,你有几种方法。Bootstrap 使用类来快速设置样式,但你也可以通过自定义 CSS 来覆盖这些默认样式,以获得更精确的控制。
1. 使用 Bootstrap 内置类(最简单)
Bootstrap 提供了一组预定义的背景和文本颜色类,你可以直接添加到 navbar
元素上。
背景颜色类 ( bg-*
):
-
bg-primary
(蓝色) -
bg-secondary
(灰色) -
bg-success
(绿色) -
bg-danger
(红色) -
bg-warning
(黄色) -
bg-info
(浅蓝色) -
bg-light
(浅灰色,你当前正在用) -
bg-dark
(深灰色) -
bg-white
(白色) -
bg-transparent
(透明)
文本颜色类 ( text-*
):
-
text-primary
-
text-secondary
-
text-success
-
text-danger
-
text-warning
-
text-info
-
text-light
(通常用于深色背景) -
text-dark
(通常用于浅色背景) -
text-white
(通常用于深色背景) -
text-muted
(柔和的灰色)
示例:将导航栏改为深色背景,白色文字
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand text-white" href="/">主页面</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<li class="nav-item">
<a class="nav-link text-white" href="/cont">大学介绍</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/playlist">视频播放</a>
</li>
<li class="nav-item active">
<a class="nav-link text-white" href="/about">关于主页</a>
</li>
</ul>
</div>
</nav>
注意:
-
当使用深色背景 (
bg-dark
,bg-primary
等) 时,通常需要将navbar-light
类替换为navbar-dark
。这会自动调整导航栏内部的一些元素(比如汉堡菜单图标)的颜色,使其在深色背景下可见。 -
nav-item active
类会给当前活动链接添加额外的样式(通常是背景色或下划线),其文本颜色可能需要单独处理或使用自定义 CSS 来确保一致性。
2. 使用自定义 CSS(更灵活、推荐)
如果你需要使用 Bootstrap 预设类之外的特定颜色,或者想要更细致地控制样式,那么自定义 CSS 是最佳选择。
你可以在 <head>
标签内的 <style>
块中直接添加 CSS 规则,或者创建一个单独的 .css
文件并在 <head>
中链接它。
示例:自定义导航栏背景和字体颜色
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<style>
.custom-navbar {
background-color: #336699 !important; /* 你想要的背景颜色,!important 确保覆盖Bootstrap默认样式 */
}
.custom-navbar .navbar-brand,
.custom-navbar .nav-link {
color: #E0E0E0 !important; /* 你想要的字体颜色 */
}
.custom-navbar .nav-link:hover {
color: #FFFFFF !important; /* 鼠标悬停时的字体颜色 */
}
.custom-navbar .nav-item.active .nav-link {
color: #FFFFFF !important; /* 活动链接的字体颜色 */
background-color: #2a527b !important; /* 活动链接的背景颜色,可选 */
border-radius: .25rem; /* 让活动链接看起来像个按钮 */
}
/* 当使用自定义深色背景时,可能需要调整汉堡菜单图标的颜色 */
.custom-navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
</style>
<title>个人网站</title>
</head>
<body>
<nav class="navbar navbar-expand-md custom-navbar"> <a class="navbar-brand" href="/">主页面</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
<li class="nav-item">
<a class="nav-link" href="/cont">大学介绍</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/playlist">视频播放</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/about">关于主页</a>
</li>
</ul>
</div>
</nav>
<div class="container">
</div>
<script src="/static/js/jquery.slim.min.js" ></script>
<script src="/static/js/popper.min.js" ></script>
<script src="/static/js/bootstrap.min.js" ></script>
</body>
</html>
解释:
-
custom-navbar
类: 我在<nav>
标签上添加了一个新的类custom-navbar
,并移除了bg-light
。所有针对这个导航栏的自定义样式都将通过这个类来选择。 -
background-color
: 设置导航栏的背景色。!important
关键字是必要的,因为它会强制覆盖 Bootstrap 默认的bg-light
样式。 -
color
: 设置导航栏品牌 (.navbar-brand
) 和链接 (.nav-link
) 的字体颜色。同样,为了覆盖 Bootstrap 默认值,可能需要!important
。 -
nav-link:hover
: 设置鼠标悬停在链接上时的颜色,提高用户体验。 -
nav-item.active .nav-link
: 专门针对当前活动(active
)的导航项。 -
navbar-toggler-icon
: 如果你将背景设为深色,原先的深色汉堡菜单图标可能会看不清。你需要用 CSS 调整它的background-image
,使其变为浅色(通常是白色或浅灰色)。示例中提供了一个 SVG 数据 URI 来实现这个。
选择哪种方法取决于你的需求。如果你只需要快速调整到 Bootstrap 提供的基本颜色方案,使用内置类非常方便。但如果你想实现更独特的品牌色或设计,自定义 CSS 是必不可少的。