ナビゲーションバーの背景色を異なる色に変更する方法

Question

各ホームプロジェクトなどの背景色を変更するにはどうすればよいですか？

私は最初のホームナビを変更することができましたが、残りの部分を変更する方法を考えることができませんでした。最初の子供、2番目の子供などと何か関係があると思います。どんな助けも素晴らしいだろう。

Answer 1

まず、クラスを作成します。 .nav-justified > li > a{ background-image: none; }

を次に、あなたの家....プロジェクトなどの各タブのために、独自のクラスを作成し、そこあなたの背景色を渡し、noneに背景画像を設定します。

.nav-justified > li.project-tab > a{ 
 
    background-color: #1da1f2; 
 
    background-image: none; 
 
    }

<link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"/> 
 
<link href="http://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
      <ul class="nav nav-justified"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li class="project-tab"><a href="#">Projects</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Downloads</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      </ul> 
 
     </nav>