цвет навигационной панели в Twitter Bootstrap


113

Как изменить цвет фона навигационной панели Twitter Bootstrap 2.0.2? Как я могу изменить цвет всех элементов навигационной панели, чтобы отразить цвет фона?


1
Решаемые. Внесены изменения в bootstrap.css .navbar-inner {background-color: # 2c2c2c; изменил цвет фона, все остальное прокомментировал. Спасибо.
Gattoo

12
Не рекомендуется изменять основную таблицу стилей CSS начальной загрузки просто потому, что при обновлении таблицы стилей все ваши изменения будут потеряны, поэтому просто включите любые необходимые изменения в свою собственную таблицу стилей.
Андрес Ильич

Спасибо, Андрес, как еще можно изменить поведение Bootstrap? Навигационная панель является проблемой для большинства сайтов, поскольку люди просто не могут поверить, что Интернет так же хорош для эстетики, как и для функциональности.
Gattoo

4
Фактически вы можете перезаписать большинство правил начальной загрузки внутри своей собственной таблицы стилей, вам вообще не нужно трогать таблицу стилей bootstrap.css. Таким образом, при обновлении начальной загрузки вы можете просто обновить ее сразу, и все ваши изменения останутся, а также таким образом вы можете перезаписать стили ускоренной загрузки в соответствии с вашими потребностями (будь то шрифты или цвета) вашего сайта.
Андрес Ильич

Гораздо более простой ответ: stackoverflow.com/questions/18529274/…
Крис Джонсон,

Ответы:


134

Вы можете перезаписать цвета начальной загрузки, включая .navbar-innerкласс, указав его в своей собственной таблице стилей, а не изменяя таблицу стилей bootstrap.css, например:

.navbar-inner {
  background-color: #2c2c2c; /* fallback color, place your own */

  /* Gradients for modern browsers, replace as you see fit */
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  background-repeat: repeat-x;

  /* IE8-9 gradient filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}

Вам просто нужно изменить все эти стили своими собственными, и они будут подобраны, например, что-то вроде этого, где я устраняю все эффекты градиента и просто устанавливаю сплошной черный цвет фона:

.navbar-inner {
  background-color: #000; /* background color will be black for all browsers */
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

Вы можете воспользоваться преимуществами таких инструментов, как редактор градиентов Colorzilla, и создать свои собственные цвета градиента для всех браузеров и заменить исходные цвета своими собственными.

И, как я уже упоминал в комментариях, я бы не рекомендовал вам изменять таблицу стилей bootstrap.css напрямую, поскольку все ваши изменения будут потеряны после обновления таблицы стилей (текущая версия - v2.0.2 ), поэтому предпочтительно, чтобы вы включали все ваши изменения внутри вашей собственной таблицы стилей, в тандеме с таблицей стилей bootstrap.css. Но не забудьте перезаписать все соответствующие свойства, чтобы обеспечить согласованность между браузерами.


2
background-image: none;шесть раз?
Nowaker

2
@DamianNowak woh, только что заметил это, спасибо за подсказку: D ultimate brain fart.
Андрес Ильич

Спасибо. Меня сводило с ума, что я не мог установить цвет фона для чего угодно и применить его ко всей панели навигации.
Automatico

30

Отличный ресурс, чтобы узнать, как создать тему для начальной загрузки, - это bootswatch.com . В нем есть хорошие примеры, а также показан код. Короче говоря, они используют lessc для перекомпиляции bootstrap.css в ваш новый color-theme.css. Хорошая черта их подхода заключается в том, что он построен поверх начальной загрузки, поэтому при обновлении начальной загрузки вы просто перекомпилируете.

Ссылки об использовании lessc и bootstrap:


Замечательные ресурсы Александр. Большое спасибо.
Gattoo

1
Спасибо за ссылку на bootswatch :)
Акшат Дживан Шарма

6

Если у вас нет времени выучить «меньше» или сделать это правильно, вот грязный прием ...

Добавьте это выше, где вы визуализируете HTML-код панели навигации начальной загрузки - при необходимости обновите цвета.

<style type="text/css">   

.navbar-inner {
    background-color: red;
    background-image: linear-gradient(to bottom, blue, green);
    background-repeat: repeat-x;
    border: 1px solid yellow;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: red;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    list-style: none outside none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

.btn-group.open .btn.dropdown-toggle {
  background-color: red;
}

.btn-group.open .btn.dropdown-toggle {
  background-color:lime;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color:white;
  background-color:Teal;
}

.navbar .nav > li > a {
    color: white;
    float: none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 0 0px 0 #ffffff;
}

.navbar .brand {
  display: block;
  float: left;
  padding: 10px 20px 10px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: white;
  text-shadow: 0 0px 0 #ffffff;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: white;
  text-decoration: none;
  background-color: transparent;
}

.navbar-text {
  margin-bottom: 0;
  line-height: 40px;
  color: white;
}

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: white;
  white-space: nowrap;
}

.navbar-link {
  color: white;
}

.navbar-link:hover {
  color: white;
}

</style>


4

Я использую Bootstrap версии 3.2.0, и похоже, что .navbar-inner больше не существует.

Решения здесь, которые предлагают переопределить .navbar-inner, для меня не сработали - цвет остался прежним.

Цвет изменился только тогда, когда я переопределил .navbar, как показано ниже:

.navbar {
    background-color: #A4C8EC;
    background-image: none;
}

3

На данный момент лучший способ сделать то же самое - установить компилятор командной строки LESS, используя

$ npm install -g less jshint recess uglify-js

Как только вы это сделаете, перейдите в папку less в каталоге, а затем отредактируйте файл variables.less, и вы можете изменить множество переменных в соответствии с тем, что вам нужно, включая цвет панели навигации.

@navbarCollapseWidth:             979px;

@navbarHeight:                    40px;
@navbarBackgroundHighlight:       #ffffff;
@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
@navbarBorder:                    darken(@navbarBackground, 12%);

@navbarText:                      #777;
@navbarLinkColor:                 #777;
@navbarLinkColorHover:            @grayDark;
@navbarLinkColorActive:           @gray;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);

Как только вы это сделаете, перейдите в каталог начальной загрузки и выполните команду make.


2

Если вы используете LESS, вы можете использовать Mixins для меньшего количества кода. Здесь я добавлю градиент, границу и радиус границы:

.navbar-inner {
  #gradient > .vertical(#ffffff, #ECECEC);
  border: #E2E2E2;
  .border-radius(6px);
}

* Если вы используете гем rails, twitter-bootstrap-rails, я делаю это прямо в файле bootstrap_and_overrides.css.less *


2

это то, что я делаю

.navbar-inverse .navbar-inner {
  background-color: #E27403; /* it's flat*/
 background-image: none;
}

.navbar-inverse .navbar-inner {
  background-image: -ms-linear-gradient(top, #E27403, #E49037);
  background-image: -webkit-linear-gradient(top, #E27403, #E49037);
  background-image: linear-gradient(to bottom, #E27403, #E49037);
}

он хорошо работает для всех навигаторов, вы можете увидеть демо здесь http://caverne.fr вверху


1

В строке 4784 bootstrap.css мы видим:

.navbar-inverse .navbar-inner {
  background-color: #FFFFFFF;
  background-image: -moz-linear-gradient(top, #222222, #111111);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
  background-image: -webkit-linear-gradient(top, #222222, #111111);
  background-image: -o-linear-gradient(top, #222222, #111111);
  background-image: linear-gradient(to bottom, #222222, #111111);
  background-repeat: repeat-x;
  border-color: #252525;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

Вам нужно удалить все объявления свойства background-image, чтобы получить желаемый эффект.


1

Разве бритва Оккама не сказала бы просто делать это, пока вам не понадобится что-то более сложное? Это немного похоже на взлом, но может удовлетворить потребности тех, кто хочет быстрого исправления.

.navbar-default .container-fluid{
    background-color:#62ADD7; // Change the color
    margin: -1px -1px 10px -1px; // Get rid of the border
}

1

Если вы используете версию Bootstrap. Самый эффективный способ - изменить имя переменной в файле LESS или SASS.

$navbar-default-color:              #FFFFFF !default;
$navbar-default-bg:                 #36669d !default;
$navbar-default-border:             $navbar-default-bg !default;

Это, безусловно, самый простой и эффективный способ изменить панель навигации Bootstraps. Вам не нужно писать переопределения, и код остается чистым.



0

На самом деле я просто перезаписываю все, что хочу изменить в site.css, вы должны загрузить site.css после начальной загрузки, чтобы он перезаписал классы. Сейчас я просто создал свои собственные классы с моей собственной небольшой темой начальной загрузки. Такие мелочи

.navbar-nav li a{
    color: #fff;
    font-size: 15px;
    margin-top: 9px;
}
.navbar-nav li a:hover{

    background-color: #18678E;
    height: 61px;
}

Я также изменил подобные ошибки проверки таким же образом.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.