HTMLファイルにBootstrapを導入する。[随時更新]

#対象読者
Bootstrapを使ってみたいけど、よく分からないという人
公式ドキュメントが英語でチンプンカンプンの人


#今回用意するもの
エディタ(今回は[Vscode](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)を使用します)
HTMLファイル(作り方は[こちら](https://qiita.com/YutakaYamasaki/items/ed8b21e0a870366edd26))

#そもそも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/

Twitter社が開発したCSSフレームワーク
LaravelやRuby on Railsなどもフレームワークですが、
ここではそのCSS用の認識でいいです。
class名にBootstrapが用意している、英単語を入れるだけで
見栄えの良い画面を作る事ができます。
一々class名を考えて、marginやpaddingを指定しなくても良いんです。


#準備
適当に```Hello_world.html```のファイルを作成して、エディタで開いてください。
```!```を押してそのまま```tab```キーを押すと勝手にDOCTYPE宣言をしてくれます。
必要のない```meta```タグは削除しておきましょう。
![bootstrap.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/16d12752-f76e-14b6-b309-525122521dd2.gif)


```html:hello_world.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>
    
</body>
</html>
```


#Bootstrapを導入する。
[こちら](https://getbootstrap.com/docs/4.3/getting-started/introduction/)に飛ぶと、手順が書いています。
手順通りに書いてみましょう。

##```head```のタグの中に```link```のタグを導入する。

英文ですが、『```head```のタグの中に下記をコピーアンドペーストしてね』って書いています。指示通りに書いてみましょう。

<img width="1078" alt="スクリーンショット 2019-06-17 午前0.30.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/82eb6f67-9292-ed86-a669-de4186a59448.png">


```html:hello_world.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>hello world</title>
</head>
<body>
    
</body>
</html>
```

##```</body>```の手前に```script```のタグを導入する。

次に```</body>```のタグの前に3つの```script```タグをコピーして貼り付けます。

<img width="1080" alt="スクリーンショット 2019-06-17 午前0.37.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/dcbf9c04-fe5a-5082-ce5a-11e6078a3f6b.png">


```html:hello_world.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>hello world</title>
</head>
<body>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
</body>
</html>
```

上のように貼り付ける事ができたら、保存しましょう！
これでBootstrapの導入は完了しました！


#(おまけ)実際に書いてみる。
Bootstrapは公式ドキュメントで様々なクラス名を紹介しています。
コピーアンドペーストするだけで簡単に実装できてしまいます。
<img width="282" alt="スクリーンショット 2019-06-17 午前0.43.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/4d00ce8c-907c-7136-5ccb-109d30a70541.png">

今回は例としてドロップダウンのみ紹介します。
[こちら](https://getbootstrap.com/docs/4.3/components/dropdowns/#single-button)に飛んで、Singlebuttonを実装します。

<img width="1084" alt="スクリーンショット 2019-06-17 午前0.48.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/faf7838e-c10a-d785-95df-02708d1a3932.png">

既に見本があるので、コードをコピーして貼り付けましょう。

```html:hello_world.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>hello world</title>
</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="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 
</body>
</html>
```

下のように表示されれば成功です。
<img width="409" alt="スクリーンショット 2019-06-17 午前1.02.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387875/484a44c2-5c4a-c2f3-cca9-9f0993619181.png">


#(おまけのおまけ)オフラインでもBootsrapを導入する方法

随時更新します。