Navbar color в Twitter Загрузочный

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

ОТВЕТЫ

Ответ 1

Вы можете перезаписать цвета бутстрапа, включая класс .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;
}

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 5

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

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

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

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

Ответ 6

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

$ npm install -g less jshint recess uglify-js

Как только вы это сделаете, перейдите в папку меньшего размера в каталоге, а затем отредактируйте файл 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.

Ответ 7

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

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

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

Ответ 8

вот что я делаю

.navbar-inverse .navbar-inner {
  background-color: #E27403; /* it 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 вверху

Ответ 9

В строке 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", чтобы получить желаемый эффект.

Ответ 10

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

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

Ответ 11

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

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

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

Ответ 12

Вы можете настроить свою собственную версию на официальном сайте Bootstrap.

Ответ 13

Я просто просто перезаписываю все, что хочу изменить на сайте 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;
}

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