为了账号安全,请及时绑定邮箱和手机立即绑定

Bootstrap 4导航栏颜色

Bootstrap 4导航栏颜色

慕容3067478 2019-12-15 14:08:33

在Bootstrap 4中,如何更改导航栏的背景颜色?twbscolor的代码不起作用。我想将背景色设为其他颜色并将字体颜色设为白色。


<nav class="navbar navbar-toggleable-md navbar-light bg-danger">

        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

        </button>

        <a class="navbar-brand" href="#">Jordan Baron</a>


        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav mr-auto">

                <li class="nav-item active">

                    <a class="nav-link" href="#">Home</a>

                </li>

            </ul>

        </div>

    </nav>


查看完整描述

3 回答

?
精慕HU

TA贡献1632条经验 获得超5个赞

更新2019-Bootstrap v4.1 +


这是更改导航栏背景颜色的简单得多的方法。


只需使用.navbar-dark代替,.navbar-light然后添加您的自定义背景颜色类,例如.bg-company-red


.navbar-dark 会使您的所有链接变白。


的HTML


<nav class="navbar navbar-dark bg-company-red">

CSS样式...


.bg-company-red {

    background-color: darkred !important;

}

有关官方文档,请参见http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes。



查看完整回答
反对 回复 2019-12-16
?
犯罪嫌疑人X

TA贡献1640条经验 获得超5个赞

更新2019


请记住,您定义的所有CSS覆盖都必须具有相同的CSS特异性或更高的CSS特异性,才能正确覆盖Bootstrap的CSS。


Bootstrap 4.1+


默认情况下,导航栏是透明的。如果你只是想改变背景颜色,它可以简单地通过将颜色的做<navbar class="bg-custom">,但请记住,不会改变其他颜色,如链接,悬停和下拉菜单的颜色。


这是CSS,它将更改Bootstrap 4中所有相关的Navbar颜色...


/* change the background color */

.navbar-custom {

    background-color: #ff5500;

}

/* change the brand and text color */

.navbar-custom .navbar-brand,

.navbar-custom .navbar-text {

    color: rgba(255,255,255,.8);

}

/* change the link color */

.navbar-custom .navbar-nav .nav-link {

    color: rgba(255,255,255,.5);

}

/* change the color of active or hovered links */

.navbar-custom .nav-item.active .nav-link,

.navbar-custom .nav-item:focus .nav-link,

.navbar-custom .nav-item:hover .nav-link {

    color: #ffffff;

}

演示:http://www.codeply.com/go/U9I2byZ3tS


覆盖导航栏浅或深


如果您使用的是Bootstrap 4导航栏navbar-light或navbar-dark类,请在替代中使用它。例如,更改导航栏链接颜色...


.navbar-light .nav-item.active .nav-link,

.navbar-light .nav-item:focus .nav-link,

.navbar-light .nav-item:hover .nav-link {

        color: #ffffff;

}

进行任何Bootstrap定制时,您需要了解CSS特殊性。自定义CSS中的替代项需要使用与bootstrap.css一样特定的选择器。阅读更多


透明导航栏


请注意,默认情况下,Bootstrap 4导航栏是透明的。使用navbar-dark暗/大胆的背景颜色,并使用navbar-light如果导航栏是一个较浅的颜色。如此处所述,这将影响文本的颜色和切换图标的颜色。


相关:https : //stackoverflow.com/a/18530995/171456



查看完整回答
反对 回复 2019-12-16
?
梦里花落0921

TA贡献1603条经验 获得超5个赞

我知道了。这很简单。使用bg类可以轻松实现这一目标。让我演示给你看:


 <nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>

这为您提供了默认的蓝色导航栏


如果要更改自己喜欢的颜色,则只需在导航栏中使用样式标签:


<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">



查看完整回答
反对 回复 2019-12-16

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信