javascript - 沙盒 Bootstrap

Question

Bootstrap很棒，但是太自以为是了。其规则中的选择器非常广泛，如 input 或 label。

有没有办法对 Bootstrap 的 CSS 进行沙箱化，使其仅将规则应用于具有特定类的容器中的元素？

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

Answer 1

您可以使用其中包含 @import 规则的作用域样式 block 。你甚至可以编写一个小的 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