【Django】bootstrapをhtml内で使用する方法。〜「settings.py」の設定〜

今回の記事は、Webアプリの形を整えるためにcssフレームワークのbootstrapを使ってhtmlの見た目を整える方法に関する記事です。

bootstrapをhtml内で使用する方法
①Django bootstrap4のpipインストール
②setting.pyの修正
③htmlにbootstrap入れてテスト

bootstrapをhtml内で使用する方法

実際行うことについてですが普通にDjangoのページをrenderできる方にはとても簡単です。

行うことは下記です。

①Django bootstrap4のpipインストール
②setting.pyの修正
③htmlにbootstrap入れてテスト

①Django bootstrap4のpipインストール

まずは仮想環境でも、localでもいいので下記でDjango用のbootstrapをインストールします。

pip install django-bootstrap4

②setting.pyの修正

次にbootstrapを使用する旨をsetting.pyに記載します。私はここで勘違いしました。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'ap',    ##追加アプリ名
    'bootstrap4'  ##bootstrap使用ということで追加
]

...................
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR,'templates')
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'builtins':[                  
                'bootstrap4.templatetags.bootstrap4',
            ],    #####ここ「builtins」を追加
        },
    },
]

私は上記のapp追加でbootstrap関連の参考記事にこれを追加すると記載があり、bootstrap4というテストのアプリ名で記事を記載しているから私の場合は私のアプリ名のみ記載でいいのかとはじめ思っていたのですがそういうわけでもありません。

bootstrapを使用する場合は下記は必要になってくるようです。そのため、全部付け加えてください。

③htmlにbootstrap入れてテスト

{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{% bootstrap_messages %}

<form action="/url/to/submit/" method="post" class="form">
    {% csrf_token %}
    {% buttons %}
    <button type="submit" class="btn btn-primary">
        Submit
    </button>
    {% endbuttons %}
    {% buttons submit='OK' reset="Cancel" %}{% endbuttons %}
</form>

これで画面が表示されればbootstrapの結果を反映できています。

ご確認ください。

以上今回は実装できてるかどうかまででした！！