css - 如何覆盖 Twitter Bootstrap navbar-inner 类

Question

我希望我的 Bootstrap 布局中的 navbar-inner 元素可以由 jQuery UI 框架自定义。

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

</div>

但是导航栏的背景总是黑色的。如何在不更改 Bootstrap css 文件的情况下使用 ui-widget-header 类的背景覆盖 Bootstrap 背景？

Answer 1

创建您自己的 CSS 文件，您将使用该文件覆盖 bootstrap.css 中的样式，并在对 bootstrap.css 的引用之后添加对 HTML 的引用。此外，为确保您的样式覆盖 Bootstrap 样式，您可以在您的 css 中使用 !important 关键字。

因此，创建一个 CSS 文件并将其命名为 bootstrap-overwrite.css。

添加要覆盖的 Bootstrap 类 -

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

在 Bootstrap 引用之后添加对 HTML 的引用 -

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

Twitter Bootstrap 是一个应该重新设计样式的框架，因此您不必担心会覆盖默认样式。