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>
2019年更新。
あなたが定義するどのようなCSSオーバーライドも、Bootstrap'のCSSを適切にオーバーライドするためには、同じCSS特異性かそれ以上でなければならないことを覚えておいてください。
Bootstrap 4.1+に対応しています。
ナビゲーションバーは、デフォルトでは透明になっています。背景色のみを変更したい場合は、<navbar class="bg-custom">
に色を適用するだけで可能ですが、リンクやホバー、ドロップダウンメニューの色など、他の色は変更されないことに注意してください。
ここでは、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
を使用してください。これにより、テキストの色や ここで説明されているトグラーアイコンの色に影響を与えます。
2019年のアップデート - Bootstrap v4.1+。
ここでは、もっと簡単にナビバーの背景色を変更する方法を紹介します。
.navbar-lightの代わりに
.navbar-darkを使い、
.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 をご覧ください。
いただきました。これはとても簡単です。クラス bg
を使えば簡単に実現できます。
お見せしましょう。
<nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>
これで、デフォルトの青い navbar
が表示されます。
お気に入りの色を変更したい場合は、nav
の中でstyleタグを使うだけです。
<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">