Блог

Главная - Вопросы по программированию - Как изменить цвет фона навигационной панели начальной загрузки

Как изменить цвет фона навигационной панели начальной загрузки

#html #css #twitter-bootstrap-3 #navbar

Вопрос:

Я пытаюсь изменить цвет навигационной панели, закодированной в начальной загрузке. До сих пор были встроены классы начальной загрузки, применяемые к навигационной панели, чтобы изменить цвет фона и привязки в нем, но они вообще не изменили цвет. Есть ли что-то, что можно было бы сделать, чтобы исправить это?

Вот HTML-код:

 <!-- import Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-light bg-white navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>    
      </button>
      <!-- <a class="navbar-brand" href="#">WebSiteName</a> -->
      <a href="index.html"><img src="fusebloomLogo.png" alt="FuseBloom logo" class="logo"/></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#mission">Mission</a></li>
        <li><a href="#reviews">Reviews</a></li>
        <li><a href="#process">Process</a></li>
      </ul>
    </div>
  </div>
</nav>

Комментарии:

1. какой это элемент ? id="myNavbar" ?

2. это класс=»навигационная панель».

3. это не меняет цвет фона на белый, как используется в class=»bg-белый».

Ответ №1:

 .navbar-light {
    background-color: yellow !important;
    border: none !important;
    border-width:0!important;
}

Комментарии:

1. Большое вам спасибо, Прит! Это сделало свое дело.

Ответ №2:

 .navbar-light {
    background-color: yellow !important;
}

Комментарии:

1. Спасибо, Притам! Есть ли способ стереть границу вокруг него…теперь вокруг навигационной панели есть черная граница.

2. .navbar-подсветка {граница:отсутствует;}

3. .navbar-свет { цвет фона: желтый !важно; граница: нет !важно; ширина границы:0!важно; }

Ответ №3:

Вы проверили color-boostrap v5

 <nav class="navbar navbar-light" style="background-color: #ffffff;">
    <!-- Navbar content -->
</nav>
Метки: