2016.01.03 Bootstrap Ver3 ドキュメント導入

Bootstrap（Ver3.3.6）の導入

以下の操作を行ってBootstrap（Ver3.3.6）の実行環境を作成して下さい。

Bootstrapをダウンロードし、必要ファイルをサーバーにアップロードする
基本テンプレート
ダウンロードせずにCDN(Content Delivery Network)を使用する

Bootstrapをダウンロードし、必要ファイルをサーバーにアップロードする

ダウンロード出来るものは3種ありますので、ご自分の用途に応じてダウンロードして下さい。
１は取り敢えず使ってみたい人向け、２・３は開発者向けというところです。

１．必要最低限の環境がアーカイブされたもの

　Download Bootstrap（V3.3.6）

上記リンクからダウンロードして下さい。

ダウンロード後、展開するとcss・fonts・jsディレクトリが作成されます。
以下のファイルをサーバーにアップロードして下さい。

css/bootstrap.min.css
js/bootstrap.min.js
fonts/全て

２．サンプルやツール・ソースなどがアーカイブされているもの

　Download Bootstrap（V3.3.6）FullSet

上記リンクからダウンロードして下さい。

ダウンロード後、展開すると多くのディレクトリとファイルが作成されます。
distディレクトリにあるcss・fonts・jsディレクトリから以下のファイルをサーバーにアップロードして下さい。

css/bootstrap.min.css
js/bootstrap.min.js
fonts/全て

３．自分でCSSやJavascriptをカスタマイズしたもの

　公式カスタマイズページ（英語表示）

公式ページから各機能のカスタマイズが行えます。
画面最下部にあるダウンロードボタンから、カスタマイズしたBootstrapをダウンロードして下さい。

４．その他

ダウンロードせずにWeb上に用意されたものを使用するという方法もあります。

ダウンロードせずにCDN(Content Delivery Network)を使用する

基本テンプレート

以下が基本的なテンプレートとなります。
テキストエディタなどにコピペして使用して下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!–[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]–>
</head>
<body>
    <h1>テンプレートです！</h1>
    HTMLを記述してください
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

CSS・Javascript等のディレクトリの記述は、自分の環境に合わせて変更して下さい
また、以下の点に注意して下さい

　　9-12行目
　　　　　IE8以下の対応を入れない場合には削除してください
　　17行目
　　　　　jQueryの設定を行っています
　　　　　ご自分の環境に合ったバージョンを指定してください

ダウンロードせずにCDN(Content Delivery Network)を使用する

Bootstrap CDNでBootstrapの各バージョンが公開されています。
CDNを使用する場合は以下の箇所を変更して下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!–[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]–>
</head>
<body>
    <h1>テンプレートです！</h1>
    HTMLを記述してください
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

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も追加されます
また、旧バージョンも保存されているので自分に合ったバージョンを選んでください