Как мне изменить CSS, чтобы изменить цвет панели навигации в Twitter Bootstrap?
tl; dr - TWBSColor - Создайте свой собственный загрузчик navbar
Примечания к версии: - Онлайн-инструмент: Bootstrap 3.3.2+ / 4.0.0+ - Этот ответ: Bootstrap 3.0.x
У вас есть две основные навигационные панели:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>Вот основные цвета и их использование:
#F8F8F8: фон навигационной панели#E7E7E7: граница navbar#777: цвет по умолчанию#333: цвет при наведении ( #5E5E5Eдля .nav-brand)#555: активный цвет#D5D5D5: активный фонЕсли вы хотите добавить собственный стиль, вот CSS, который нужно изменить:
/* navbar */
.navbar-default {
background-color: #F8F8F8;
border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555;
border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}Вот четыре примера настраиваемой цветной панели навигации:
И код SCSS:
$bgDefault : #e74c3c;
$bgHighlight : #c0392b;
$colDefault : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
background-color: $bgDefault;
border-color: $bgHighlight;
.navbar-brand {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.navbar-text {
color: $colDefault; }
.navbar-nav {
> li {
> a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}}
> .active {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}
> .open {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}}
.navbar-toggle {
border-color: $bgHighlight;
&:hover, &:focus {
background-color: $bgHighlight; }
.icon-bar {
background-color: $colDefault; }}
.navbar-collapse,
.navbar-form {
border-color: $colDefault; }
.navbar-link {
color: $colDefault;
&:hover {
color: $colHighlight; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu {
> li > a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
> .active {
> a, > a:hover, > a:focus, {
color: $colHighlight;
background-color: $bgHighlight; }}}
}Я только что создал скрипт, который позволит вам сгенерировать вашу тему: TWBSColor - Создайте свою собственную панель навигации Bootstrap
[Обновление]: TWBSColor теперь генерирует код SCSS / SASS / Less / CSS.
[Обновление]: теперь вы можете использовать Меньше как язык по умолчанию, предоставляемый TWBSColor
[Обновление]: TWBSColor теперь поддерживает раскраску раскрывающихся меню
[Обновление]: TWBSColor теперь позволяет выбирать вашу версию (добавлена поддержка Bootstrap 4)
!importantв конец каждого из выводимых операторов CSS, похоже, решило проблему. Пример:color: #ffffff;становитсяcolor: #ffffff !important;.Обновление 2020
Изменение цвета Navbar отличается (и немного проще) в Bootstrap 4 . Вы можете создать собственный класс панели навигации, а затем ссылаться на него, чтобы изменить панель навигации, не затрагивая другие элементы навигации Bootstrap.
Bootstrap 4.3+
CSS, необходимый для изменения Navbar, намного меньше в Bootstrap 4 ...
Bootstrap 4 Custom Navbar Демо
Изменение цвета фона активной / всплывающей ссылки также работает с тем же CSS-кодом, но вы должны настроить отступ, если вы хотите, чтобы цвет bg заполнял всю высоту ссылки ...
py-0убрать вертикальные отступы со всей панели навигации ...<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>Bootstrap 4 Изменить ссылку и цвет фона Демо
Также см .: Bootstrap 4 Изменить цвет гамбургера Toggler
Bootstrap 3
Пользовательская демонстрация Navbar на Bootply
Если в Navbar есть выпадающие списки, добавьте следующее, чтобы изменить их цвета:
Демо с выпадающим
источник
Это заняло у меня некоторое время, но я обнаружил, что включение следующего позволило изменить цвет панели навигации:
источник
background-imageдобавлено, что помешало бы работе TWBSColor. Могу я узнать версию вашего Bootstrap и вашу среду, пожалуйста? (дополнительная тема, библиотеки CSS ...)Используя Меньше
Вы также можете рассмотреть возможность составления собственной версии. Попробуйте http://getbootstrap.com/customize/ (в котором есть отдельный раздел для настроек навигационных панелей (панель навигации по умолчанию и инвертированная навигационная панель)) или загрузите свою собственную копию с https://github.com/twbs/bootstrap .
Вы найдете настройки навигационной панели в
variables.less.navbar.lessиспользуется для компиляции панели навигации (зависит отvariables.lessиmixins.less).Скопируйте раздел «navbar-default» и заполните свои собственные настройки цвета. Изменение переменных в
variables.lessбудет самым простым способом (изменение стандартной или обратной навигационной панели не будет проблемой, потому что у вас есть одна навигационная панель только на страницу).Вы не будете менять все настройки в большинстве случаев:
Вы также можете попробовать http://twitterbootstrap3navbars.w3masters.nl/ . Этот инструмент генерирует код CSS для вашей пользовательской панели навигации. При желании вы также можете добавить градиентные цвета и границы на панель навигации.
источник
Просто добавьте идентификатор в панель навигации HTML, например:
С этим идентификатором вы можете стилизовать цвет панели навигации, а также ссылки и выпадающие списки.
Примеры, применяемые к различным типам панелей навигации
черный
желтый
Темно-синий
Красный (вишня)
Темно-зеленый
Вот CSS
источник
Вы должны изменить CSS напрямую? Что о...
источник
Попробуйте это тоже. Это сработало для меня.
источник
Если речь идет только об изменении цвета панели навигации, я бы предложил использовать: Bootstrap Magic . Вы можете изменить значения для различных свойств панели навигации и увидеть предварительный просмотр.
Загрузите результат в виде пользовательской таблицы стилей CSS или файла переменных. Вы можете изменить значения с помощью полей ввода и палитры цветов.
источник
В этом CSS панели навигации установите собственный цвет:
источник
пример
Просто попробуйте так:
файл
navabr.cssОсновные используемые по умолчанию цвета:
Вы можете узнать больше в разделе Изменение цвета панели навигации в Twitter Bootstrap 3 .
источник
Обратное и упоминание имени класса по умолчанию в Twitter Bootstrap делает их черно-белыми.
Лучше, вы не должны переопределять это и добавлять класс рядом с ним и писать свой особый стиль для этого:
источник
Использование:
25+ Bootstrap Nav Меню Код
источник