沙盒引导程序

Question

Bootstrap很棒，但过于自以为是。选择器的规则非常广泛，例如input或label。

有没有办法沙箱Bootstrap的CSS，以便它只将规则应用于某个类的容器中的元素？

现在我们必须replace-regexp CSS源代码将.bootstrap添加到每个选择器。但是，它可能会破坏Bootstrap的模态窗口等等。

Answer 1

您可以使用包含@import规则的作用域样式块。您甚至可以编写一个小JS来将其添加到具有所需类的每个元素。

<div class="untouched">
</div>
<div class="bootstrapped">
<style scoped>
    @import url("bootstrap.css");
</style>
</div>

暂定的jQuery：

$('.bootstrapped').prepend('<style scoped>@import url("bootstrap.css");</style>');

我意识到scope不受广泛支持，所以这里是一个polyfill：https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin