SFDC：Bootstrap SF1 - tyoshikawa1106のブログ

f:id:tyoshikawa1106:20141028000720p:plain

BootstrapをSalesforce1向けにカスタマイズした『Bootstrap SF1』というのがあることを教えてもらったのでちょっと試してみました。『Bootstrap SF1』についてはLightning Components Developer’s Guideに記載されています。

f:id:tyoshikawa1106:20141028003007p:plain

Bootstrap SF1 · Bootstrap

ダウンロードしてみたファイルの内容はこんな感じです。

f:id:tyoshikawa1106:20141028004521p:plain

ファイルがいっぱいですね。どれが必要なファイルかイマイチ分からなかったので、参考になりそうなindex.htmlのファイルを確認してみました。次のファイルを読みこめば使用できそうです。

f:id:tyoshikawa1106:20141028010004p:plain

実際に試してみました。

f:id:tyoshikawa1106:20141028015119p:plain

これでサンプルコードをつかって正常に表示できるか確認してみたところ、無事に表示することができました。

f:id:tyoshikawa1106:20141028015430p:plain

Bootstrap SF1を使用するときに必要な読み込みファイルは次のような内容で良さそうです。

<link rel="stylesheet" href="/resource/BootstrapSF1/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/resource/BootstrapSF1/dist/css/docs.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" />
<script type="text/javascript" src="/resource/BootstrapSF1/js/docs.js" />

Bootstrap SF1の使用方法は上記の通りです。続いてBootstrap SF1に用意されているコンポーネントについてです。コンポーネントは『New Components』から確認できます。

f:id:tyoshikawa1106:20141028015833p:plain