Jonvy

导航

对于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 (柔和的灰色)

示例:将导航栏改为深色背景,白色文字

HTML
 
<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> 中链接它。

示例:自定义导航栏背景和字体颜色

HTML
 
<!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>

解释:

  1. custom-navbar 类: 我在 <nav> 标签上添加了一个新的类 custom-navbar,并移除了 bg-light。所有针对这个导航栏的自定义样式都将通过这个类来选择。

  2. background-color 设置导航栏的背景色。!important 关键字是必要的,因为它会强制覆盖 Bootstrap 默认的 bg-light 样式。

  3. color 设置导航栏品牌 (.navbar-brand) 和链接 (.nav-link) 的字体颜色。同样,为了覆盖 Bootstrap 默认值,可能需要 !important

  4. nav-link:hover 设置鼠标悬停在链接上时的颜色,提高用户体验。

  5. nav-item.active .nav-link 专门针对当前活动(active)的导航项。

  6. navbar-toggler-icon 如果你将背景设为深色,原先的深色汉堡菜单图标可能会看不清。你需要用 CSS 调整它的 background-image,使其变为浅色(通常是白色或浅灰色)。示例中提供了一个 SVG 数据 URI 来实现这个。

选择哪种方法取决于你的需求。如果你只需要快速调整到 Bootstrap 提供的基本颜色方案,使用内置类非常方便。但如果你想实现更独特的品牌色或设计,自定义 CSS 是必不可少的。

posted on 2025-07-31 18:16  不亮  阅读(46)  评论(0)    收藏  举报