javascript - サンドボックス化されたブートストラップ

Question

Bootstrapは優れていますが、独断的すぎます。inputそのルールのセレクターは、またはのように非常に広範labelです。

Bootstrap の CSS をサンドボックス化して、特定のクラスを持つコンテナ内の要素にのみルールを適用する方法はありますか?

現在、すべてのセレクターの先頭にreplace-regexpCSS ソースを追加する必要がありました。.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はあまり広くサポートされていないことに気づいたので、ここにポリフィルがあります: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin