как изменить цвет навигации в bootstrap - PullRequest
Новая
       36

как изменить цвет навигации в bootstrap

0 голосов
/ 28 марта 2020

Как бы я go изменил CSS для изменения цвета панели навигации в Bootstrap 4?

Как это исправить? это мой код, вы можете проверить его

image

вы можете проверить это мой css

* {
    margin: 0;
    padding: 0;
}
.nav-link {
    font-size: 16px;
    font-weight: 600;
}


.nav-item {
    margin: 2px;

}

есть ли возможность изменить цвет с bootstrap класс

Ответы [ 3 ]

0 голосов
/ 28 марта 2020

Если я понял ваше требование, вы хотите, чтобы navbar имел цвет? 

* {
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: 16px;
  font-weight: 600;
}

.nav-item {
  padding: 5px;
  background-color: gray;
  display: inline-block;
  border: 1px solid black;
}
image
0 голосов
/ 28 марта 2020

Во-первых, вы можете посмотреть здесь: https://getbootstrap.com/docs/4.4/components/navbar/#color -schemes

Здесь вы можете использовать класс navbar-light вместо класса navbar-dark. Аналогично, вместо класса bg-transparent можно использовать один из классов: bg-primary, bg-success, bg-info, bg-warning, bg-danger, bg-вторичный, bg-dark и bg-ligh для фоновый цвет. Если вы хотите использовать цвета, отличные от этих, вы можете определить свои собственные классы в файле стиля, который связан с вашей страницей, и использовать приведенные выше классы начальной загрузки. например: 

.my-bg-color{
   background-color: #123456;
}

.my-navbar-theme .navbar-brand {
  color: # ff0;
}

.my-navbar-theme .navbar-brand: hover, .my-navbar-theme .navbar-brand: focus {
  color: # ff0;
}

.my-navbar-theme .navbar-nav .nav-link {
  color: rgba (255, 255, 0, 0.5);
}

.my-navbar-theme .navbar-nav .nav-link: hover, .my-navbar-theme .navbar-nav .nav-link: focus {
  color: rgba (255, 255, 0, 0.75);
}

.my-navbar-theme .navbar-nav .nav-link.disabled {
  color: rgba (255, 255, 0, 0.25);
}

.my-navbar-theme .navbar-nav .show> .nav-link,
.my-navbar-theme .navbar-nav .active> .nav-link,
.my-navbar-theme .navbar-nav .nav-link.show,
.my-navbar-theme .navbar-nav .nav-link.active {
  color: # ff0;
}

.my-navbar-theme .navbar-toggler {
  color: rgba (255, 255, 0, 0.5);
  border-color: rgba (255, 255, 0, 0.1);
}

.my-navbar-theme .navbar-toggler-icon {
  background-image: url ("data: image / svg + xml,% 3csvg xmlns = 'http: //www.w3.org/2000/svg' width = '30 'height = '30' viewBox = '0 0 30 30 '% 3e% 3cpath stroke =' rgba (255, 255, 0, 0.5) 'stroke-linecap =' round 'stroke-miterlimit = '10' stroke-width = '2' d = 'M4 7h22M4 15h22M4 23h22' / 3c% 3% / 3% SVG ");
}

.my-navbar-theme .navbar-text {
  color: rgba (255, 255, 0, 0.5);
}

.my-navbar-theme .navbar-text a {
  color: # ff0;
}

.my-navbar-theme .navbar-text a: hover, .my-navbar-theme .navbar-text a: focus {
  color: # ff0;
}

Вы можете добавить свои собственные классы вместо bootstrap классов. 

<nav class="navbar navbar-expand-lg my-navbar-theme my-bg-color">
0 голосов
/ 28 марта 2020

Я предполагаю, что у него уже есть установленный цвет, поскольку его класс 'navbar-dark', поэтому вы можете просто изменить цвет напрямую, однако обычно, если класс уже установлен, вам придется изменить класс navbar, чтобы изменить цвет , но вы можете переписать это с! важный (но не рекомендуется) 

.navbar {
  background-color: orange !important;
}
...