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>

因为＆gt;表示直接子项，它只影响标记的范围元素中的子项。这意味着您不必在要设置样式化的每个元素中重复class"light"或class="dark"。相反，你选择一个Scope，它可能是body，或div，甚至是span，然后像往常一样使用bootstrap类。

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

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

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

1 个答案: