Как переписать Twitter Bootstrap navbar-inner class

Question

Мне нравится, что внутренний элемент navbar в макете Bootstrap настраивается в рамках пользовательского интерфейса jQuery.

<div class="navbar-inner ui-widget-header">

</div>

Но фон навигационной панели всегда черный. Как перезаписать фон начальной загрузки фоном из класса заголовка ui-widget-header без изменения файла начальной загрузки css?

Answer 1

Создайте свой собственный файл CSS, который вы будете использовать для перезаписи стилей из файла bootstrap.css и добавьте его ссылку на ваш HTML после ссылки на файл bootstrap.css. Кроме того, чтобы гарантировать, что ваши стили перезаписывают загрузочные, вы можете использовать ключевое слово! Important в своем CSS.

Итак, создайте файл CSS и назовите его что-нибудь вроде bootstrap-overwrite.css.

Добавьте класс начальной загрузки, который вы хотите перезаписать -

.navbar-inner
{
  background: none !important;
}

Добавьте ссылку на ваш HTML после ссылки начальной загрузки -

<link href="styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="styles/bootstrap-overwrite.css" rel="stylesheet" type="text/css" />

Twitter Bootstrap - это фреймворк, который должен быть в рестайлинге, поэтому вам не следует бояться переписывать стили по умолчанию.

Answer 2

Сделайте селектор ui-widget-header более специфичным , чтобы он перекрывал navbar-inner в каскаде . Например,

#pageid .navbar .ui-widget-header {
    background: red;
}

Более специфичен , чем просто ...

.ui-widget-header {
    background: red;
}