Bootstrap 4 kolor paska nawigacyjnego

Question

W Bootstrap 4, jak mogę zmienić kolor tła paska nawigacyjnego? Kod z twbscolor nie działa. Chcę, aby kolor tła był inny, a kolor czcionki biały.

<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

Aktualizacja 2018

Bootstrap 4.0.0:

Oto CSS, który zmieni kolor NavBar w Bootstrap 4 ...

/* 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; 
} 

Demo: http://www.codeply.com/go/U9I2byZ3tS

Pamiętaj też, że BS4 nadal znajduje się w alpha, więc te klasy mogą się zmienić. Ponadto, znacznik bg-danger nadpisze ogólny kolor tła.

Użyj navbar-dark dla ciemnych/pogrubionych kolorów tła i użyj navbar-light, jeśli pasek nawigacyjny ma jaśniejszy kolor. Wpłynie to na kolor tekstu i color of the toggler icon as explained here.

Answer 2

Oto znacznie prostszy sposób zmiany koloru tła paska nawigacyjnego.

Użyj swojego .navbar i utwórz styl dla niestandardowego koloru tła, takiego jak .bg-company-red. .navbar-dark spowoduje, że wszystkie twoje łącza będą białe.

HTML

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

CSS styl ...

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

Answer 3

mam. To bardzo proste. Korzystając z klasy bg, możesz to łatwo osiągnąć. Pokażę ci:

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

Daje to domyślny niebieski navbar

Jeśli chcesz zmienić swój ulubiony kolor, a następnie po prostu użyć tagu styl w nav:

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

Answer 4

Jeśli przeczytasz dokumentację bootstrap 4, Color schemes, odpowie na twoje pytania.