BootstrapをVisualforce向けに最適化したVisualStrapというものが公開されているとのことなので、Developer環境で試してみました。これを使うとVisualforceページで簡単にBootstrapを使うことができるようになります。
画面中央の"Managed Package / Installation"ボタンをクリックすると管理パッケージをインストールできるようになっていました。
画面右側の"Unmanaged Package / Installation"ボタンをクリックすると未管理パッケージをインストールできるみたいです。
パッケージをインストールするとVisualforceページで"vs"タグがつかえるようになります。サンプルコードによると次の形が基本になるみたいです。
<apex:page docType="html-5.0" showChat="true" sidebar="false"> <vs:importVisualStrap theme="default" /> <vs:visualStrapBlock > <!--All the Visualstrap content and Visualforce content here --> </vs:visualStrapBlock > </apex:page>
※サイトに載っていたサンプルコードをコピーして試してみたところエラーとなりましたが、最後のapexタグのところで"/"が抜けているためエラーになっていました。
以下、サイトに載っていたサンプルコードを一通り試してみました。
1. Panel
2. Alert
3. Well
4. Label
5. Badges
6. Jumbotron
7A. Formblock - Vertical
7B. Formblock - Horizontal
8. Glyphicons
9. Grid System
10 A. Thumbnail
10 B. Thumbnail - Custom Content
11. Tables
11 A. Tables : Striped Rows
11 B. Tables : Bordered
11 C. Tables : Hover Rows
11 D. Tables : Condensed table
12. Buttons
13. Button Group
14. Button Toolbar
15. Button dropdowns
16. Split button dropdowns
17. Page header
18. Progress Bar
19. ListGroup and ListGroupItem
20. Tooltip
21. Modal
showHeader="true"の状態でも正常に実行されました。自分が試したときは21のModalだけうまく実行できませんでした。モーダルポップアップが表示されたあとにクローズしてしてしまったので、どこか使い方を間違えているみたいです。(エラーの件無事に解決しました。詳細については下記に追記してあります)
実際に試してみて本当に簡単にBootstrapを使うことができました。パッケージをインストールするだけで使えるのですごく便利だと思います。
今回検証につかったコードは次のとおりです。
追記
Modalで発生したエラーですが、apex:commandButtonに 「onclick="return false;"」を付けたら動くようになることを教えてもらいました。次のように変更して確認してみたところバッチリ動くようになりました。
<apex:commandButton value="Launch My Modal Popup" html-data-toggle="modal" html-data-target="#myModal" onClick="return false;" styleClass="btn-primary brn-lg"/>