Изменение Bootstrap NavBar Color

Question

Я пытался изменить цвет навигатора в бутстрапе, но не увенчался успехом. Навигационная панель остается такой же, как если бы я никогда не добавлял CSS или пользовательский стиль.

Я добавил пользовательский CSS в свой собственный файл css, style.css. Ниже приведено содержимое файла style.css.

Вы также можете просмотреть мой HTML ниже, который является содержимым index.htm, которое касается навигационной панели и стилей.

Примечание: Я использую бутстрап из последней версии, расположенной по адресу http://getbootstrap.com; не предыдущие verisons (EX: твиттер самозагрузки)

style.css

/* Custom Styling */ 

/* Core Styling */ 

body { 
    font-famliy: Helvetica, sans-serif; 
    font-size 14px; 
    line-height: 1.42857143; 
    color: #333; 
} 


/* Navbar Styling */ 

/* navbar */ 

.navbar-default { 
    background-color: #14a3ff; 
    border-color: #1495fe; 
} 
.navbar-default .navbar-brand { 
    color: #ecf0f1; 
} 
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { 
    color: #ecf0f1; 
} 
.navbar-default .navbar-text { 
    color: #ecf0f1; 
} 
.navbar-default .navbar-nav > li > a { 
    color: #ecf0f1; 
} 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
    color: #ecf0f1; 
} 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    color: #ecf0f1; 
    background-color: #1495fe; 
} 
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { 
    color: #ecf0f1; 
    background-color: #1495fe; 
} 
.navbar-default .navbar-toggle { 
    border-color: #1495fe; 
} 
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 
    background-color: #1495fe; 
} 
.navbar-default .navbar-toggle .icon-bar { 
    background-color: #ecf0f1; 
} 
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form { 
    border-color: #ecf0f1; 
} 
.navbar-default .navbar-link { 
    color: #ecf0f1; 
} 
.navbar-default .navbar-link:hover { 
    color: #ecf0f1; 
} 

@media (max-width: 767px) { 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
    color: #ecf0f1; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
    color: #ecf0f1; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
    color: #ecf0f1; 
    background-color: #1495fe; 
    } 
} 

index.htm

index.htm> укладка (головка)

<!-- Custom Styling --> 
<link rel="stylesheet" href="css/style.css" /> 
<!-- <link rel="stylesheet" href="css/bootstrap.min.css" /> --> 
<link rel="stylesheet" href="css/bootstrap.css" /> 
<link rel="stylesheet" href="css/font-awesome.min.css" /> 

index.htm> Navbar & JS (из головы)

<!-- Navbar --> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" 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" href="#">Brand</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       <li class="divider"></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <form class="navbar-form navbar-left" role="search"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 

Answer 1

Я нашел решение проблемы, которая произошла. На самом деле это была довольно простая проблема.

Проблема заключалась в том, что я добавлял загрузочный CSS в HTML после добавления пользовательского css.

Так он должен был:

<head> 

    <!-- Custom Styling --> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/style.css" /> 

</head> 

Спасибо за помощь.

Answer 2

Bootstrap NavBar Generator является то, что вам нужно. Это немного сложно, когда вы используете созданный CSS.

Если вы обнаружили, что после вставки сгенерированной таблицы стилей NavBar не изменяется вообще.

Пожалуйста, включая следующую был то, что позволило изменить цвет NavBar:

.navbar{ 
    background-image: none; 
} 

Надеется, что это полезно. : D