【Django】BootstrapでjQueryが読み込めない

Django

(最終更新月:2021年12月)

「BootstrapでAlertをつけたけど、☓ボタンが動かない!」

「jQueryのCDNをつけてるのに正しく動かない!」

という方へ向けて、カンタンに解決できる方法を見つけたのでお伝えします!

当記事を通じて、

  • django-bootstrap4のインストール
  • jQueryが読み込めない!問題を解決する方法

についてお伝えします

CDNからjQueryを読み込めない場合は、django-bootstrap4を使うとカンタンに問題が解決します

【インストール方法】

pip install django-bootstrap4

【設定方法】

settings.pyで、

INSTALLED_APPS = [
    #....,
    'bootstrap4',
]

TEMPLATES = [
    {
        'OPTIONS': {
            'context_processors': [
            #....,
            ],
            'builtins':[  #この箇所を追記します
                'bootstrap4.templatetags.bootstrap4', #この箇所を追記します
            ], #この箇所を追記します
        },
    },
]

とします

【HTMLテンプレートで読み込み】

HTMLテンプレート内で、

{% bootstrap_javascript jquery=’full’ %}

としましょう

一例として、django-allauthのメッセージで適用する場合、

    {% block allauth %}
      {% bootstrap_javascript jquery='full' %}
    {% if messages %}
          <div>
              {% for message in messages %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  {{message}}
                  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
                </div>
              {% endfor %}
          </div>
      {% endif %}
    {% endblock %}

となります

「Invalid block tag」エラーが出てしまう場合は、{% bootstrap … %}タグの上に{% load boostrap4 %}を入れてみよう!

✔当ブログは以下のような方に向けて書かれています

「Djangoでのアプリ開発を学びたい!」

「Djangoで開発したアプリをWebで公開するにはどうするの?」

✔当ブログ掲載の記事

  • Djangoで作る日報アプリ開発
  • WebアプリをWeb上に公開する方法
  • Webアプリ開発に必要なそのほかの情報
【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

公式LINEも始めました。記事更新についてや、当ブログ内の人気記事などの情報を定期的に配信しています。

友だち追加

ITCブログにご協力いただける方は、以下もご検討いただけると嬉しいです。

ITCに投げ銭をする

タイトルとURLをコピーしました