Wie ändere ich die Farbe und den Hintergrund dieser Navigationsleiste?

Question

Ich habe hier eine Navbar, wie ändere ich die Farbe und die Schriftfarbe?

Ich habe versucht, ändern die li-Attribute, dann die ul, und so ziemlich jedes Element in diesem Code, ich bin stecken.

https://jsfiddle.net/hoevqu8a/

<nav class="navbar navbar-inverse navbar-fixed-top color navigation" role="navigation"> 
    <div class="container navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header navigation"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand navigation" href="#">Start Bootstrap</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navigation"> 
       <li class="navigation"> 
        <a href="#" class="navigation">About</a> 
       </li> 

       <li> 
        <a href="#">Creators</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

Answer 1

hinzufügen Klasse Ihrem css

.navbar-header.navigation{ 
    background: your colour here; 
} 

oder

Verwendung Inline-Stil

<nav class="navbar navbar-inverse navbar-fixed-top color navigation" role="navigation" style="background: your color;"> 

würde ich nicht zweiten Ansatz, wie es empfehlen ist slo wer und nicht eine gute Praxis im Allgemeinen, aber immer noch tun. Wie bei dem ersten können Sie von navbar-inversen oder Klasse loszuwerden oder als CSS-Selektor verwendet alternativ außer Kraft zu setzen, was Bootstrap

.navbar.navbar.navigation.color { 
 
    background: red; 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<nav class="navbar navbar-inverse navbar-fixed-top color navigation" role="navigation"> 
 
    <div class="container navigation"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header navigation"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand navigation" href="#">Start Bootstrap</a> 
 
     </div> 
 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse navigation" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav navigation"> 
 
       <li class="navigation"> 
 
        <a href="#" class="navigation">About</a> 
 
       </li> 
 

 
       <li> 
 
        <a href="#">Creators</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container --> 
 
</nav>

Arbeiten mit der Farbklasse habe mich zunächst nicht bemerkt Punkt

Answer 2

bootstrap Klasse navbar-inverse Standard CSS ist Hintergrundfarbe: # 222; Rahmenfarbe: # 080808; und für die Link-Textfarbe standardmäßig css ist .navbar-inverse .navbar-nav> li> a {color: rgb (157, 157, 157);}

Also, wenn Sie die Hintergrundfarbe ändern möchten die navbar und der link (bedeutet ein tag oder anchor text) kann man so etwas ausprobieren.

.navbar-inverse{ 
     background-color:red; 
     border-bottom-color:red; 
    } 
.navbar-inverse .navbar-nav>li>a { 
    color: white; 
}