Bootstrap 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>
brooksrelyt
編集された質問 6日 11月 2019 в 2:43
プログラミング
bootstrap-4
13日 4月 2017 в 12:16
5 ビュー

2019年更新。

あなたが定義するどのようなCSSオーバーライドも、Bootstrap'のCSSを適切にオーバーライドするためには、同じCSS特異性かそれ以上でなければならないことを覚えておいてください。

Bootstrap 4.1+に対応しています。

ナビゲーションバーは、デフォルトでは透明になっています。背景色のみを変更したい場合は、``に色を適用するだけで可能ですが、リンクやホバー、ドロップダウンメニューの色など、他の色は変更されないことに注意してください。

ここでは、Bootstrap 4で関連するナビバーの色を変更するCSSを紹介します。

/* 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 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 Specificityを理解する必要があります。カスタムCSSのオーバーライドには、bootstrap.cssと同じくらい特定のセレクタを使用する必要があります。続きを読む 說明書

透明なナビバーについて

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

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

Zim
編集した答え 7日 3月 2019 в 12:31
解説 (0)

2019年のアップデート - Bootstrap v4.1+。

ここでは、もっと簡単にナビバーの背景色を変更する方法を紹介します。

.navbar-lightの代わりに.navbar-darkを使い、.bg-company-red`のようなカスタム背景色クラスを追加するだけです。

.navbar-dark`では、すべてのリンクが白になります。

HTML

CSS スタイル...

.bg-company-red {
    background-color: darkred !important;
}

公式ドキュメントは http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes をご覧ください。

Chad
編集した答え 22日 5月 2019 в 7:17
解説 (5)

いただきました。これはとても簡単です。クラス bg を使えば簡単に実現できます。

お見せしましょう。

これで、デフォルトの青い navbar が表示されます。

お気に入りの色を変更したい場合は、navの中でstyleタグを使うだけです。

brooksrelyt
編集した答え 6日 11月 2019 в 2:45
解説 (0)