今回のお題
前回はmodelFormクラスを用いて味気ないフォームを作成いたしました。
ですが、こちら側からclassやidを設定できないという都合上、CSSを用いたスタイリングに限界があります。
そこで今回は、bootstrap5を用いてそちらにスタイリングを加えていこうと思います。
目次
- crispy_bootstrap5とは
- 導入
- settings.pyの編集
- テンプレートの編集
crispy_bootstrap5とは
formクラスもしくはmodelFormクラスを用いて作成したフォームにbootstrapを適用せるためのパッケージです。
現在BootStrapにはver.4とver.5がありますが、crispyにもそれぞれに合わせたバージョンがあります。
本記事はver.5向けのものになります。
また、BootStrapそのものの導入についても解説しないので、その2点についてご了承ください。
導入
まずは、パッケージの導入です。
作業用のプロジェクトの仮想空間を立ち上げたら、以下のコマンドでインストールを行います。
% pip install crispy_bootstrap5
導入できたら、settings.pyを編集します。
settings.pyの編集
以下のように編集します。
settings.py
INSTALLED_APPS = [
# 省略
"crispy_forms", #追加
"crispy_bootstrap5", #追加
]
# 追加
CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
# 追加
CRISPY_TEMPLATE_PACK = "bootstrap5"
ここまでできたら、最後にテンプレートを編集します。
テンプレートの編集
{% extends "myapp/base.html" %}
{% load crispy_forms_tags %}
{% block body %}
<!-- 省略 -->
{{ form|crispy }}
<!-- 省略 -->
{% endblock %}
{% load crispy_forms_tags %}でcrispyをロードして、{{ form|crispy }}で適用するフォームを指定しています。
出来上がったフォームが以下になります。
終わりに
これでformクラス、modelFormクラスにBootStrapを適用することができました。
開発してくださった方々に感謝ですね。