我正在使用HTML，CSS和JavaScript（无iframe）开发单页Web应用程序。
我在左侧有一个滑出菜单，我想包含根据深色Bootstrap主题（来自Bootswatch）设置样式的元素。
但是，在应用程序的主要区域中，我想放置使用另一个轻便的Bootstrap主题设置样式的元素。
有办法吗？
我建议使用>运算符将两个主题手动添加到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，然后像往常一样使用bootstrap类。
您可以手动执行此操作，但是我建议您使用LESS已经与最新的引导程序源代码集成在一起的代码，或者SASS可以在此处找到的代码。
也许有更好的选择，但这是我目前唯一能想到的。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句