【发布时间】：2015-04-12 19:56:29
【问题描述】：
我正在使用 HTML、CSS 和 JavaScript（没有 iframe）开发单页 Web 应用程序。
我在左侧有一个滑出菜单，我想包含根据深色 Bootstrap 主题（来自 Bootswatch）设置样式的元素。
然而，在应用程序的主要区域，我想放置使用另一个浅色 Bootstrap 主题样式的元素。
有什么办法可以做到吗？
【问题讨论】：
【发布时间】：2015-04-12 19:56:29
【问题描述】：
我建议使用 > 运算符手动将这两个主题添加到 CSS Scope 中，in this post 解释得很好。
例如，对于引导按钮类：
.light > // This is the Scope
.btn {
...
}
}
这样，您可以使用以下语法：
<div class="light">
<a href="#" class="btn btn-primary">Light Themed Link</a>
</div>
<div class="dark">
<a href="#" class="btn btn-primary">Dark Themed Link</a>
</div>
由于 > 表示直接子级，它只影响标记的范围元素内的子级。这意味着您不必在要样式化的每个元素中重复 class"light" 或 class="dark"。相反，您选择一个 Scope，它可能是 body，或者一个 div，甚至是一个 span，然后像往常一样使用引导类。
您可以手动执行此操作，但我建议您使用已集成最新引导源代码的LESS 或您可以找到here 的SASS。
也许有更好的选择，但这是我现在唯一能想到的。
【讨论】：
-
这也是我会做的。 +1
-
感谢您的回答！抱歉，也许我的问题并不清楚......我实际上并不想编写自己的样式、颜色等。我只想在一页上混合两个预制的 Bootstrap 主题。我会得到一个浅色和一个深色主题。正如我在您的回答中所理解的那样，我仍然需要指定浅色和深色主题的颜色吗？对不起，如果你已经回答了，但我没听懂...
-
您不必创建自定义主题。您需要做的是将两个主题添加到不同的范围中，这样它们就不会相互混合，并且仅在首先选择要应用的样式范围时才会应用。我提到 LESS 或 SASS 是因为您需要修改 CSS 文件才能将主题添加到范围中。
-
啊，我明白了，然后我可以打开两个主题文件的编辑并分别用 .light > {} 和 .dark > {} 包装它们吗？我看到的唯一缺点是我必须为每个元素指定亮或暗。也许我可以改用类似的东西： div.light-theme {} 而不要使用 > 运算符？
-
是的，你也可以使用 div .light-theme {} 但这需要你一直写而我的方式我告诉你可以只使用并在里面编写普通的引导类。我更新了主要响应，以便您可以更好地了解如何将其与 Direct Child 运算符一起使用。