В Bootstrap 4, Как я могу идти об изменении цвета фона панели навигации? Код twbscolor не'т работу. Я хочу, чтобы цвет фона другой цвет и шрифт, цвет белый.
<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>
Обновление 2019
Помните, что любой CSS переопределяет вы определяете надо же специфичность в CSS или выше для того чтобы правильно переопределить начальной загрузки'ов в CSS.
Загрузчик 4.1+
В navbar является прозрачный по умолчанию. Если вы только хотите изменить цвет фона, это может быть сделано просто путем применения цвета в <навигации класса=то"БГ-изготовленный на заказ" и>
, но помните, что выиграл't измените другие цвета, такие как ссылки, при наведении и в выпадающем меню цвета.
Здесь's для CSS, которые изменят любой соответствующие цвета navbar в ушко 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:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
Демо: http://www.codeply.com/go/U9I2byZ3tS
<ч>
Переопределить навигации светлые или темные
Если вы're через загрузочный 4 навигации `навигации-свет " или " шапку-темно-классов, а затем использовать это в переопределений. Например, изменение цвета панели навигации по ссылке...
.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
color: #ffffff;
}
<ч>
При принятии каких-либо настроек загрузки, вы должны понимать специфику Усс. Изменения в пользовательский CSS нужно использовать селекторы, как загрузочный.УСБ. Подробнее <ч>
Прозрачные Панели Навигации
Обратите внимание, что ушко 4 navbar является прозрачным по умолчанию. Использование навигации-темного для темной/смелые цвета фона, а также использования навигации-свет`, если navbar является более светлый цвет. Это влияет на цвет текста и цвет значка переключения как описано here.
Связанные: https://stackoverflow.com/a/18530995/171456
Обновление 2019 - загрузочный В4.1+
Здесь'ы гораздо более простой способ изменить цвет фона панели навигации.
Просто используйте .шапку-темный
вместо .шапку-свет и добавить пользовательский цвет фона класса, как
.БГ-компании-Красный`
`.шапку-темный сделает все ваши ссылки белый.
HTML-код
<nav class="navbar navbar-dark bg-company-red">
Стилей CSS...
.bg-company-red {
background-color: darkred !important;
}
См http://getbootstrap.com/docs/4.1/components/navbar/#color-schemes для официальной документации.
Я получил его. Это очень просто. С помощью класса БГ
вы можете легко достичь этого.
Позвольте мне показать вам:
<nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>
Это дает вам синий по умолчанию навигации
Если вы хотите изменить свой любимый цвет, а затем просто использовать тег style внутри книжка
:
<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">
вы можете писать !важно перед цвет фона стоимости недвижимости, как это он будет менять цвет ссылок.
.nav-link {
color: white !important;
}
Чтобы изменить навигации
цвет фона:
.navbar-custom {
background-color: yourcolor !important;
}