サンプル

サンプルコードをダウンロードする

Bootstrapのサンプルは充実しているので、とりあえずダウンロードすることをオススメする。

Examples 」の下図のリンクからダウンロードできる。

ダウンロードしたZIPファイルを展開すると、以下のようなディレクトリとファイルが見つかるが、「 docs 」→ 「 examples 」に移動する。

ここにサンプルのコードがある。実行だけならば、「 公式サイト上(Examples) 」で実行した方が、簡単だろう。

「 starter-template 」を実行してみると、以下のようになる。

サンプルコードの改造

日本語化

サンプルコードは、英語用なので日本語サイト用に変更する。

変更点は1点のみ。 <html lang="en"><html lang="ja">に変える。

外部ファイルのパス

外部ファイル(ファビコン、CSS、JavaScript)のパスを修正する。 ここでは、「 starter-template 」の場合の例を示す。

「 starter-template 」ディレクトリの「 index.html 」内の「 ../../ 」で始まるパス(ファイル)を下表にまとめた。

種類 ディレクトリ パス
ファビコン (ルート) ../../favicon.ico
CSS dist ../../dist/css/bootstrap.min.css
JavaScript dist ../../dist/js/bootstrap.min.js
CSS assets ../../assets/css/ie10-viewport-bug-workaround.css
JavaScript assets ../../assets/js/ie8-responsive-file-warning.js
JavaScript assets ../../assets/js/ie-emulation-modes-warning.js
JavaScript assets ../../assets/js/vendor/jquery.min.js
JavaScript assets ../../assets/js/ie10-viewport-bug-workaround.js

上表から分かるように、参照しているディレクトリは、ルート(docsディレクトリ)のファビコンと、distディレクトリ、assetsディレクトリになる。 これらを順に説明する。

ルート(docsディレクトリ)のファビコン

特に説明は不要と思われるので省略。

distディレクトリ

Bootstrapの実体。下のリンクからダウンロードしたZIPファイルに含まれる。

assetsディレクトリ

古いIE用のバグ対応。 実質的にな不要だが、参照しておいた方が良い。 ただし、上のリンクからダウンロードしたZIPファイルに含まれない

なお、これらのファイルは http://getbootstrap.com/ にホスティングされている。 よって、「 ../../assets/ 」を「 http://getbootstrap.com/assets/ 」に置換しても良い。

次の「 カスタマイズ 」で、下のようにナビゲーション・バーを緑色にするカスタマイズ例を示す。