tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualStrapのメリット

Visualforceページを開発するときにBootstrapを使いたい場合にVisualStrapを使うと便利です。どう便利なのかというと次のようにBootstrapのCSSを読み込むと標準のヘッダーなどの表示に影響がでてしまいます。

<apex:page docType="html-5.0" >
    <apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css"/>
</apex:page>

通常の表示
f:id:tyoshikawa1106:20140322222423p:plain

BootstrapのCSSを読み込んだときの表示
f:id:tyoshikawa1106:20140322222613p:plain


文字が小さくなっていることが確認できます。このように標準CSSに影響がでてしまうのでshowHeader="false"にするときでないとちょっと使いずらい感じです。


これがVisualStrapの場合、特定のタグ内にのみBootstrapのCSSが適用されるので標準のCSSに影響がでることはありません。(簡単に試してみた感じではみつかりませんでした)

f:id:tyoshikawa1106:20140311213016p:plain


ということでVisualStrapは標準のCSSに影響がでることなくBootstrapを使用できるというとても便利な仕組みになっています。

SFDC:BootstrapがVisualforceで簡単に使えるようになる「VisualStrap」を試してみました - tyoshikawa1106のブログ