[コマンド不要！]Bootstrapをオフラインでも使えるようにローカル環境を構築する。

![getbootstrap.com_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/22d39339-2162-578f-2a99-f4c7e209d2e5.png)
https://getbootstrap.com/

#対象読者
Bootstrapをオフラインでも使いたい人
リンクを貼り付けるだけでBootstrapを使っている人
コマンド操作よくわからないから、とりあえずマウスを使って環境構築したい人

#ここでやること。
オフラインでもBootstrapが使えるようにローカル環境構築します。
使用しているOSはMacですが、Windowsでも同じようにできるはずです。
CDNを使用した簡単な方法は[こちら](https://qiita.com/drafts/8d2185da7323802b63af/edit)の記事でまとめています。

#ダウンロードするもの

- Bootstrap
- jQuery
- popper.js

##Bootstrap
公式ドキュメントに行き、ファイルをダウンロードをします。
Compiled CSS and JSの項目に行き、Downloadのボタンを押してください。

リンク先は[こちら](https://getbootstrap.com/docs/4.3/getting-started/download/#compiled-css-and-js)
![getbootstrap.com_docs_4.3_getting-started_download_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/45371d55-044d-10ca-006c-bcfd84a95658.png)

ダウンロードしたら解凍して下記のファイルを取り出しましょう。
今回は下記のファイルを使うことで、オフラインでもBootstrapを使えるようにします。

```bootstrap-4.3.1-dist > css > bootstrap.min.css```


<img width="759" alt="スクリーンショット 2019-06-17 午後8.42.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/ff217530-b4a3-f7ef-fb30-6b3d835e1ea7.png">

```bootstrap-4.3.1-dist > js > bootstrap.min.js```
<img width="767" alt="スクリーンショット 2019-06-17 午後8.43.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/7d04a2d4-0a8b-3377-fe22-7cb2f1394d4a.png">


##jQuery
BootstrapはjQueryを使用して表示しています。
つまり、jQueryを入れないとBootstrapも動かない訳です。
jQueryをPCにダウンロードしましょう。

![jquery.com_download_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/3489264d-4ac6-0be4-35d3-c11bc8163e70.png)
https://jquery.com/download/
ダウンロードボタンがたくさんありますが、一番最初に書いている
***Download the compressed, production jQuery 3.4.1***のリンクを右クリックして```名前をつけて保存```もしくは```リンク先を別名をつけて保存```を選択して、ダウンロードしてください。
(バージョンは多少違っていても問題ありません。)

![jquery.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/2efd487b-3c4d-814c-33a1-1bc0a045dddf.gif)

##popper.js
popper.jsをインストールします。
jQueryと同様、Popper.jsをダウンロードしないとBootstrapは動作しません。
![popper.js.org_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/2bd9114e-ce43-1e17-ca42-46085df87463.png)
https://popper.js.org/
トップページのINSTALLから飛ぶと、Githubのページに飛びます。
jQueryと同様にリンクを右クリックして保存してください。

![popper.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/2918e964-2876-546a-c777-bb18bec803e0.gif)


#準備

##ディレクトリを作成する
ディレクトリ構造は下記のように作成してください。
そして、先ほどダウンロードしてきた```bootstrap.min.css```、```bootstrap.min.js```、```jquery-3.4.1.min.js```をドラッグ&ドロップで移動しましょう。

```
helloworld/
　├ css/
　│　└　bootstrap.min.css
　├ js/
　│　├　bootstrap.min.js
　│　├　popper.min.js
　│　└　jquery-3.4.1.min.js
　└ hello_world.html
```

下の写真の通りになっているか、確認してください。
<img width="656" alt="スクリーンショット 2019-06-17 午後10.40.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/19d36e1c-e44f-ae53-91d3-df27e7c134b7.png">

<img width="172" alt="スクリーンショット 2019-06-17 午後10.40.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/94a90b17-d220-e7fd-5d28-883b3f1565a3.png">

##hello_world.htmlを編集する。

###CSSファイルを読み込む

``` head ```のタグに下記のリンクタグを貼り付けてください。

```html
　<link rel="stylesheet" href="css/bootstrap.min.css">
```

###JSファイルを読み込む
```</body>```に下に``` script ```のタグを貼り付けてください。

```html
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
```

ここで気をつけて欲しいのが、先にjQuery、popper.jsのスクリプトタグを読み込ませてください。
HTMLは上から順番に読み取ります。
jQuery、popper.jsを先に読み込ませないと、Bootsrapは動きません。
全体はこんな感じです。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>hello world</title>
</head>
<body>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>
```


これで準備が整いました！

#実際にSingle buttonを実装してみる。

[前回](https://qiita.com/YutakaYamasaki/items/8d2185da7323802b63af)でも使用したSingle buttonを実際に実装してみましょう。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>
```

下の画像のように表示されれば成功です！

<img width="387" alt="スクリーンショット 2019-06-17 午後10.45.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/8fb47d59-3018-fbeb-c574-8207b2db8073.png">


#最後に

これで、Bootstrapをオフラインでも使えることができました！
CDNと比べてダウンロードするもの、作業が多いですが、
実際にやってみてください。