Question

我喜欢让我的Bootstrap Layout中的navbar-inner元素可以通过jQuery UI框架进行自定义。

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

</div>

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

Answer 1

创建自己的CSS文件，用于覆盖bootstrap.css中的样式，并在引用bootstrap.css后添加对HTML的引用。另外，为确保您的样式覆盖引导程序，您可以在CSS中使用！important关键字。

因此，创建一个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选择器更加specific，以便它覆盖the cascade中的navbar-inner。例如，

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

更多特定而不仅仅是......

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