沙盒引导程序答案

【问题标题】：Sandboxed Bootstrap沙盒引导程序
【发布时间】：2012-11-19 08:08:36
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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

【讨论】：