javascript – 沙盒引导程序

2023年3月12日 179次阅读

Bootstrap很棒,但也很自以为是.选择器的规则非常广泛,如输入或标签.

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

现在我们不得不替换-regexp CSS源来为每个选择器添加.bootstrap.但是,它可能会破坏Bootstrap的模态窗口等等.

最佳答案 您可以使用包含@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>');

我知道范围不是很广泛支持,所以这里是一个polyfill：https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin

点赞