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

#今回用意するもの
エディタ(今回はVscodeを使用します)
HTMLファイル(作り方はこちら)

#そもそもBootstrapって何？

https://getbootstrap.com/

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

#準備
適当にHello_world.htmlのファイルを作成して、エディタで開いてください。
!を押してそのままtabキーを押すと勝手にDOCTYPE宣言をしてくれます。
必要のないmetaタグは削除しておきましょう。

hello_world.html

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

#Bootstrapを導入する。
こちらに飛ぶと、手順が書いています。
手順通りに書いてみましょう。

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

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

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タグをコピーして貼り付けます。

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は公式ドキュメントで様々なクラス名を紹介しています。
コピーアンドペーストするだけで簡単に実装できてしまいます。

今回は例としてドロップダウンのみ紹介します。
こちらに飛んで、Singlebuttonを実装します。

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

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>

下のように表示されれば成功です。

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

随時更新します。