Бутстрап 4 цвета навигация

В 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>

Ответ 1

Обновление 2019

Помните, что любые переопределения CSS, которые вы определяете, должны иметь одинаковую специфику CSS или более, чтобы правильно переопределить Bootstrap CSS.

Бутстрап 4. 1+

Навбар по умолчанию прозрачный. Если вы хотите изменить только цвет фона, это можно сделать, просто применив цвет к <navbar class="bg-custom">, но помните, что это не изменит другие цвета, такие как ссылки, указатель мыши и раскрывающийся список цвета меню.

Здесь CSS, который изменит любые соответствующие цвета Navbar в 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:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

Демо: http://www.codeply.com/go/U9I2byZ3tS

Переопределить Navbar Light или Dark

Если вы используете классы navbar-light или navbar-dark в Bootstrap 4 Navbar, используйте это в переопределениях. Например, изменение цвета ссылки Navbar...

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
        color: #ffffff;
}

При выполнении любых настроек Bootstrap вам необходимо понимать специфику CSS. Переопределения в вашем пользовательском CSS должны использовать селекторы, которые так же специфичны, как bootstrap.css. Прочитайте больше

Прозрачный Навбар

Обратите внимание, что панель Bootstrap 4 Navbar по умолчанию прозрачна. Используйте navbar-dark для темного/жирного фона и используйте navbar-light если навигационная панель имеет более светлый цвет. Это повлияет на цвет текста и цвет значка переключателя, как описано здесь.

Связанный: fooobar.com/questions/13517/...

Ответ 2

Обновление 2019 - Bootstrap v4. 1+

Здесь гораздо более простой способ изменить цвет фона панели навигации.

Просто используйте .navbar-dark вместо .navbar-light и добавьте свой собственный класс цвета фона, например .bg-company-red

.navbar-dark сделает все ваши ссылки белыми.

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 для официальной документации.

Ответ 3

Я понял. Это очень просто. Используя класс bg, вы можете легко достичь этого. Позвольте мне показать вам:

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

Это означает, что синий навигатор по умолчанию

Если вы хотите изменить свой любимый цвет, просто используйте тег стиля в навигаторе:

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

Ответ 4

Если вы прочитали документацию по загрузке 4, Цветовые схемы, она ответит на ваши вопросы.

Ответ 5

Вы можете написать! важное перед значением свойства background-color, как это, оно изменит цвет ссылок.

.nav-link {
    color: white !important;
}