【超簡単】Flaskにbootstrapを導入する方法

#  はじめに


#  Bootstrapとは
世界で一番人気のあるフロントエンドライブラリです。
モバイルファーストなレスポンシブウェブを素早くデザイン・カスタマイズすることが可能です。
豊富なコンポーネント、強力なJavaScriptプラグインを備えています。
詳しくは、[Bootstrap公式サイト](https://getbootstrap.jp/) を！！
## Flask への導入方法
①まずは[Bootstrap公式サイト](https://getbootstrap.jp/)へアクセス！
②サイト内のはじめるボタンをクリック！
![スクリーンショット 2022-05-13 23.36.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1081227/7b4d8635-33e1-580a-34a5-431ee4c42ca0.png)
※ UIが更新されている場合があります。
③CSSという見出しの下にある以下のコードをコピー！
```ruby:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
```
![スクリーンショット 2022-05-13 23.39.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1081227/b37938d1-9be5-f466-955f-d5f1a4326122.png)

④VSCodeにて開発中のフォルダ内のファイルを開く
⑤先ほど③でコピーしたコードをbase.htmlファイル内のheadタグ内にペースト！
```html:templates/base.html
<!DOCTYPE html>
<html lang="ja">
   <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ここ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        {% block header %}
        {% endblock %}
        <title>Sample</title>
  </head>
  <body>
	    {% block content %}
	    {% endblock %}
  </body>
</html>  
```
⑥公式サイトに戻り、JSという見出しの下にある以下の3つのコードをコピー！
#### Bundle
```ruby:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
```
#### Separate
```ruby:
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
```
![スクリーンショット 2022-05-13 23.39.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1081227/2733f812-12d7-19eb-76e4-93c65e5b4e36.png)
⑦先ほど⑥でコピーしたコードをtemplates/base.htmlファイル内のbodyタグの閉じダグの上にペースト！

```html:templates/base.html
<!DOCTYPE html>
<html lang="ja">
   <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ここ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        {% block header %}
        {% endblock %}
        <title>Sample</title>
  </head>
  <body>
    {% block content %}
    {% endblock %}
    <!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ここ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  </body>
</html>  
```
⑧Bootstrapがうまく導入されたか確認します。任意のviewページに以下のコードを記述！
```ruby:hoge.html
<button type="button" class="btn btn-primary">Primary</button>
```

![スクリーンショット 2022-05-14 0.38.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1081227/147953b6-1eac-8471-c01e-0b90482371c3.png)

↑がサイトに表示されていれば成功です！

##  最後に
いかがでしたでしょうか？
不具合等ありましたらご連絡ください！