css - 更改 Bootstrap 导航栏背景颜色和字体颜色

标签 css twitter-bootstrap twitter-bootstrap-3

<分区>

我想更改 Bootstrap navbar 中的背景和文本颜色,但它没有按预期更改...这是我的自定义 CSS:

.navbar-default .navbar-fnt {
    color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
    color: #CC3333;
}

以及相关的 HTML:

<div id="menu" class="navbar navbar-default navbar-fnt navbar-backgrnd">
    <div class="navbar-header">
        <div class="collapse navbar-collapse">
              ul and li
        </div>
    </div>
</div>

我不明白为什么这不会改变背景和文本颜色 - 谁能帮忙?

最佳答案

我已经使用以下 CSS 成功地设置了我的 Bootstrap 导航栏的样式。此外,您没有在 CSS 中定义任何字体,这就是字体没有改变的原因。可以找到使用此 CSS 的站点 here .

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #000; /*Sets the text hover color on navbar*/
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
        a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: white; /*BACKGROUND color for active*/
    background-color: #030033;
}

.navbar-default {
    background-color: #0f006f;
    border-color: #030033;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #66CCFF; /*change color of links in drop down here*/
}

.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background-color: silver; /*Change rollover cell color here*/
}

.navbar-default .navbar-nav > li > a {
    color: white; /*Change active text color here*/
}

关于css - 更改 Bootstrap 导航栏背景颜色和字体颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24127521/

相关文章:

javascript - HTML CSS 如何去掉首字母而不是首字母?

javascript - SlidesJS - 一页上有多个 "product"示例 slider ?

javascript - 我如何使用 jquery 从过滤列表中获取可见项的数量?

javascript - 我无法从 Javascript 触发自定义事件

css - Bootstrap 网格布局。空div

javascript - 更改 Bootstrap 的默认模态类

javascript - 为什么动态添加的字段不通过单击删除按钮删除?

CSS 边框 mpdf 输出

javascript - 使用 Affix 时 Bootstrap 导航栏重叠内容

javascript - 如何将 bootstrap 3 面板引入 bootstrap 2 网站?