web-dev-qa-db-ja.com

ブートストラップ4ナビゲーションバーの色

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>
bootstrap-4twitter-bootstrap-4
31
hiboo

2019年更新

BootstrapのCSSを適切にオーバーライドするには、定義するCSSオーバーライドが同じCSS特異性以上でなければならないことに注意してください。

ブートストラップ4.1 +

デフォルトでは、Navbarはtransparentです。あなたがのみ背景色を変更したい場合は、色を<navbar class="bg-custom">に適用することで簡単に行うことができますが、リンクなどの他の色は変更しないことに注意してください、ホバーおよびドロップダウンメニューの色。

ブートストラップ4で関連するNavbarの色を変更するanyCSSを次に示します...

/* 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

Navbar LightまたはDarkをオーバーライドします

Bootstrap 4 Navbar navbar-lightまたはnavbar-darkクラスを使用している場合は、オーバーライドでこれを使用します。たとえば、Navbarリンクの色を変更する...

.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と同じくらい固有のセレクターを使用する必要があります。 続きを読む

Transparent Navbar

Bootstrap 4 Navbarはデフォルトで透明であることに注意してください。暗い/太字の背景色にはnavbar-darkを使用し、navbarが明るい色の場合はnavbar-lightを使用します。これは、テキストの色と ここで説明するトグルアイコンの色 に影響します。

関連： https://stackoverflow.com/a/18530995/171456

28
Zim

2019年更新-ブートストラップ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 をご覧ください。

21
Chad

わかった。これは非常に簡単です。クラスbgを使用すると、これを簡単に実現できます。披露させて：

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

これにより、デフォルトの青いナビゲーションバーが表示されます

お気に入りの色を変更する場合は、nav内でstyleタグを使用します。

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

ブートストラップの背景色を上書きしたい場合は、色の後に！importantを追加する必要があります。

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

だろう：

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

スコール!!ベルナ

0
BernaAsis

ブートストラップ4のドキュメント Color schemes を読むと、質問に答えます。

0
antonjs

このようにbackground-colorプロパティ値の前に！importantを書くと、リンクの色が変わります。

.nav-link {
    color: white !important;
}
0
Hamza Arshad