如何在一页上使用两个 Twitter Bootstrap 主题？

Question

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

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

然而，在应用程序的主要区域，我想放置使用另一个轻量级 Bootstrap 主题设计的元素。

有没有办法做到这一点？

Answer 1

我建议使用>操作符手动将这两个主题添加到 CSS Scope 中，这在这篇文章中有很好的解释。

例如，对于引导按钮类：

.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已与最新引导源代码集成的或SASS您可以在此处找到的。

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