Bootstrap(Ver3.3.6)の導入
以下の操作を行ってBootstrap(Ver3.3.6)の実行環境を作成して下さい。
Bootstrapをダウンロードし、必要ファイルをサーバーにアップロードする
ダウンロード出来るものは3種ありますので、ご自分の用途に応じてダウンロードして下さい。
1は取り敢えず使ってみたい人向け、2・3は開発者向けというところです。
1.必要最低限の環境がアーカイブされたもの
上記リンクからダウンロードして下さい。
ダウンロード後、展開するとcss
・fonts
・js
ディレクトリが作成されます。
以下のファイルをサーバーにアップロードして下さい。
- css/bootstrap.min.css
- js/bootstrap.min.js
- fonts/全て
2.サンプルやツール・ソースなどがアーカイブされているもの
Download Bootstrap(V3.3.6)FullSet
上記リンクからダウンロードして下さい。
ダウンロード後、展開すると多くのディレクトリとファイルが作成されます。
dist
ディレクトリにあるcss
・fonts
・js
ディレクトリから以下のファイルをサーバーにアップロードして下さい。
- css/bootstrap.min.css
- js/bootstrap.min.js
- fonts/全て
3.自分でCSSやJavascriptをカスタマイズしたもの
公式ページから各機能のカスタマイズが行えます。
画面最下部にあるダウンロードボタンから、カスタマイズしたBootstrapをダウンロードして下さい。
4.その他
ダウンロードせずにWeb上に用意されたものを使用するという方法もあります。
基本テンプレート
以下が基本的なテンプレートとなります。
テキストエディタなどにコピペして使用して下さい。
CSS・Javascript等のディレクトリの記述は、自分の環境に合わせて変更して下さい
また、以下の点に注意して下さい
9-12行目
IE8以下の対応を入れない場合には削除してください
17行目
jQueryの設定を行っています
ご自分の環境に合ったバージョンを指定してください
ダウンロードせずにCDN(Content Delivery Network)を使用する
Bootstrap CDNでBootstrapの各バージョンが公開されています。
CDNを使用する場合は以下の箇所を変更して下さい。
CSS・Javascript等のディレクトリの記述は、自分の環境に合わせて変更して下さい
基本テンプレートからは以下の点が変更されています
8行目
href=”css/bootstrap.min.css” を
href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” に変更
18行目
src=”js/bootstrap.min.js” を
src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js” に変更
BootstrapがバージョンアップされるとBootstrap CDNも追加されます
また、旧バージョンも保存されているので自分に合ったバージョンを選んでください