ブートストラップ4 navbarの色

Question

ブートストラップ4では、どのようにしてnavbarの背景色を変更しますか？ 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> 

Answer 1

アップデート2018

ブートストラップ4.0.0：

ここでブートストラップ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:hover .nav-link { 
    color: #ffffff; 
} 

デモ：http://www.codeply.com/go/U9I2byZ3tS

BS4はまだアルファベットであるため、これらのクラスは変更される可能性があることを覚えておいてください。 また、マークアップ内のbg-dangerが背景色全体を上書きします。

黒色/太字の背景色にはnavbar-darkを使用し、明るい色の場合はnavbar-lightを使用してください。これはテキストの色に影響し、color of the toggler icon as explained hereになります。

Answer 2

ここでは、navbarの背景色を変更する簡単な方法があります。

.navbarに.navbar-darkを使用し、カスタム背景色のスタイルを.bg-company-redのように作成します。すべてのリンクを白にします。私はそれを得た

HTML

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

CSSスタイル...

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

Answer 3

。これは非常に簡単です。 クラスbgを使用すると、これを簡単に行うことができます。 私がお見せしましょう：あなたはあなたの好みの色を変更したい場合は

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

これはあなたにデフォルト青いナビゲーションバーを与える

、単にNAV内のスタイルタグを使用します。

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

Answer 4

ブートストラップ4のドキュメントColor schemesを読んだら、あなたの質問に答えます。