Bootstrapはレスポンシブデザインなページを簡単に開発できる便利なCSSフレームワークです。ただ、Visualforceページの開発で使用するとSalesforceの標準スタイルと競合して正しく表示できない箇所がありました。
例えば、Salesforceの標準ヘッダーを非表示にして標準スタイルを無効にしたときはBootstrapのスタイルが正しく適用されています。
しかし、標準スタイルが有効になっているとBootstrapのスタイルが適用されなかったり、Salesforceの標準スタイルに影響を与えてしまう箇所があります。(例：ボタンのスタイルなど)
このような理由からVisualforceの開発ではBootstrapを気軽に利用することはできませんでした。(この問題を回避するために海外の開発者がVisualStrapという便利なパッケージを開発してくれたりもしています。)
ですが、先日公開されたLightning Namespacerを利用することでBootstrapのCSSに簡単に名前プレフィックスを追加することができるようになりました。BootstrapのCSSは6000行近くありますが、一瞬で追加することができます。(チラッと確認したところヘッダーコメントの部分にも追加されましたがこれは削除しても問題なさそうでした。)
これを利用することでSalesforceの標準スタイルに影響を与えること無く、Bootstrapのスタイルを適用させることが可能です。
こんな感じにdivタグを用意して追加したクラスを指定するとうまくいきました。
簡単に確認しただけなので全て正しく適用されるかはわかりませんが、今のところ問題なさそうな感じでした。Lightning NamespacerでカスタマイズできるのはBootstrapのCSSだけではないので他にもいろいろな場面で役立ちそうです。
関連記事
サンプルコード
今回検証に使用したサンプルコードです。静的リソースにBootstrapがアップされていればコピペで動作すると思います。
