twitter-bootstrap - 如何在一个页面上使用两个 Twitter Bootstrap 主题？

Question

我正在使用 HTML、CSS 和 JavaScript(不使用 iframe)开发单页 Web 应用程序。

我的左侧有一个滑出菜单，我想在其中包含根据深色 Bootstrap 主题(来自 Bootswatch)设计样式的元素。

但是，在应用程序的主要区域中，我想放置使用另一个浅色 Bootstrap 主题设置样式的元素。

有什么办法可以做到这一点吗？

Answer 1

我建议使用 > 运算符手动将这两个主题添加到 CSS 范围中，这已经解释得很好 in this post .

例如，对于 Bootstrap 按钮类:

.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"。相反，您选择一个范围，它可能是正文、div，甚至是跨度，然后像往常一样使用 Bootstrap 类。

您可以手动执行此操作，但我建议您使用已与最新 Bootstrap 源代码集成的 LESS 或您可以找到的 SASS here 。

也许有更好的选择，但这是我现在唯一能想到的。