0

有没有推荐的方法让 2 个具有不同颜色集的 Bootstrap 组件？

例如，两个导航选项卡，一个在深色主题中，另一个在浅色主题中。

最好是这样的：

<div class="dark"><ul class="nav nav-tabs"> ... </ul></div>
<header>...</header>
<div class="light"><ul class="nav nav-tabs"> ... </ul></div>

但这样的事情可能没问题：

<ul class="dark-nav dark-nav-tabs"> ... </ul>
<header>...</header>
<ul class="dark-nav light-nav-tabs"> ... </ul>

我宁愿包含 2 个 Bootstrap CSS 文件，一个带有深色 variables.less 和一个带有浅色，但在某种命名空间中添加样式前缀。理想情况下，我希望将意外打字或其他东西的风险降到最低。在黑暗区域周围有一个会更容易。

4

2 回答 2

0

@import "bootstrap.less" under a class导致 bootstrap.less 包含 Booststrap 的 css 的每个文件的导入对我来说似乎很奇怪。另请参阅：是否可以仅使用 CDN 为 div 应用引导程序？

尝试看看 Bootstrap 是如何做到这一点的：https ://github.com/twbs/bootstrap/issues/10332

这背后的想法是纯 .navbar 类仅提供布局样式等，并且>所有颜色都由修饰符类应用。

例如，一个按钮有两个类，总是.btn用于布局样式和 . btn-*是btn-error为了颜色。我认为您可以使用相同的策略。

你应该使用类似的东西：

<ul class="nav nav-dark nav-tabs nav-tab-dark"> ... </ul>

例如，在 custom-nav.less 中定义的位置（在 bootstrap.less 中导入）：

.nav-tabs-dark > li.active > a, 
.nav-tabs-dark > li.active > a:hover, 
.nav-tabs-dark > li.active > a:focus
{
   background-color: #000;
   color: #fff;
}

等等

于 2013-11-14T13:51:02.990 回答
0

在 LESS 中，您可以在任何地方.less导入其他/.css文件，也可以在规则集中：

#dark {
   @import "style-dark.less";
}

#light {
   @import "style-light.less";
}

将此与允许您自定义颜色的 Bootstrap 选项相结合，您应该能够获得所需的结果，只需将两个生成的文件导入适当的规则集中。

于 2013-11-13T19:56:43.700 回答