Как изменить цвет фона навигационной панели Twitter Bootstrap 2.0.2? Как я могу изменить цвет всех элементов навигационной панели, чтобы отразить цвет фона?
colors
twitter-bootstrap
navbar
Татуировка
источник
источник
Ответы:
Вы можете перезаписать цвета начальной загрузки, включая
.navbar-inner
класс, указав его в своей собственной таблице стилей, а не изменяя таблицу стилей bootstrap.css, например:Вам просто нужно изменить все эти стили своими собственными, и они будут подобраны, например, что-то вроде этого, где я устраняю все эффекты градиента и просто устанавливаю сплошной черный цвет фона:
Вы можете воспользоваться преимуществами таких инструментов, как редактор градиентов Colorzilla, и создать свои собственные цвета градиента для всех браузеров и заменить исходные цвета своими собственными.
И, как я уже упоминал в комментариях, я бы не рекомендовал вам изменять таблицу стилей bootstrap.css напрямую, поскольку все ваши изменения будут потеряны после обновления таблицы стилей (текущая версия - v2.0.2 ), поэтому предпочтительно, чтобы вы включали все ваши изменения внутри вашей собственной таблицы стилей, в тандеме с таблицей стилей bootstrap.css. Но не забудьте перезаписать все соответствующие свойства, чтобы обеспечить согласованность между браузерами.
источник
background-image: none;
шесть раз?Отличный ресурс, чтобы узнать, как создать тему для начальной загрузки, - это bootswatch.com . В нем есть хорошие примеры, а также показан код. Короче говоря, они используют lessc для перекомпиляции bootstrap.css в ваш новый color-theme.css. Хорошая черта их подхода заключается в том, что он построен поверх начальной загрузки, поэтому при обновлении начальной загрузки вы просто перекомпилируете.
Ссылки об использовании lessc и bootstrap:
источник
Если у вас нет времени выучить «меньше» или сделать это правильно, вот грязный прием ...
Добавьте это выше, где вы визуализируете HTML-код панели навигации начальной загрузки - при необходимости обновите цвета.
источник
Вы можете загрузить собственную версию начальной загрузки и установить для @navbarBackground нужный цвет.
http://twitter.github.com/bootstrap/customize.html
источник
Я использую Bootstrap версии 3.2.0, и похоже, что .navbar-inner больше не существует.
Решения здесь, которые предлагают переопределить .navbar-inner, для меня не сработали - цвет остался прежним.
Цвет изменился только тогда, когда я переопределил .navbar, как показано ниже:
источник
На данный момент лучший способ сделать то же самое - установить компилятор командной строки LESS, используя
Как только вы это сделаете, перейдите в папку less в каталоге, а затем отредактируйте файл variables.less, и вы можете изменить множество переменных в соответствии с тем, что вам нужно, включая цвет панели навигации.
Как только вы это сделаете, перейдите в каталог начальной загрузки и выполните команду make.
источник
Если вы используете LESS, вы можете использовать Mixins для меньшего количества кода. Здесь я добавлю градиент, границу и радиус границы:
* Если вы используете гем rails, twitter-bootstrap-rails, я делаю это прямо в файле bootstrap_and_overrides.css.less *
источник
это то, что я делаю
он хорошо работает для всех навигаторов, вы можете увидеть демо здесь http://caverne.fr вверху
источник
В строке 4784 bootstrap.css мы видим:
Вам нужно удалить все объявления свойства background-image, чтобы получить желаемый эффект.
источник
Разве бритва Оккама не сказала бы просто делать это, пока вам не понадобится что-то более сложное? Это немного похоже на взлом, но может удовлетворить потребности тех, кто хочет быстрого исправления.
источник
Если вы используете версию Bootstrap. Самый эффективный способ - изменить имя переменной в файле LESS или SASS.
Это, безусловно, самый простой и эффективный способ изменить панель навигации Bootstraps. Вам не нужно писать переопределения, и код остается чистым.
источник
Вы можете настроить свою собственную версию на официальном сайте Bootstrap .
источник
На самом деле я просто перезаписываю все, что хочу изменить в site.css, вы должны загрузить site.css после начальной загрузки, чтобы он перезаписал классы. Сейчас я просто создал свои собственные классы с моей собственной небольшой темой начальной загрузки. Такие мелочи
Я также изменил подобные ошибки проверки таким же образом.
источник