javascript - 沙盒引导

Question

Bootstrap很棒，但是太自以为是了。其规则中的选择器非常广泛，例如inputor 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