DjangoにはBootstrapを扱うためのモジュールが用意されています。これを使うとBootstrapを楽に使うことができます。
Bootstrapの読み込みとHTMLタグへのクラス適用を普通にテンプレートファイル書いてもいいのですが、Djangoではフォームなど一部の要素を動的に出力しているため、そのやり方ではdjango-allauthを使用している場合などBootstrapを適用するのが面倒&管理しづらかったりします。
django-bootstrapモジュールを使えばそういった部分にもBootstrapを楽に適用することができます。
目次
django-bootstrap4をインストール
使用している環境にdjango-bootstrapをインストールします。
pip install django-bootstrap4
settings.pyの変更
settings.pyのINSTALLED_APPSにdjango_bootstrap4を追加します。
INSTALLED_APPS = [ ... 'django_bootstrap4', # 追加 ] # # Bootstrap4のJavaScriptコンポーネントを使用するために必要なjQueryを自動的に読み込む BOOTSTRAP4 = { 'include_jquery': True, }
Django Bootstrap4のテンプレートタグを使用できるよう記述します。
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [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', ], # Django Bootstrap4のテンプレートタグを使用できるようにする 'builtins': [ 'bootstrap4.templatetags.bootstrap4', ], }, }, ]
Django Bootstrap4のテンプレートタグには次のようなものがあります。
- bootstrap_form: Bootstrap4スタイルでフォームを表示します
- bootstrap_form_horizontal: ホリゾンタルフォームをBootstrap4スタイルで表示します
- bootstrap_formset: フォームセットをBootstrap4スタイルで表示します
- bootstrap_messages: メッセージをBootstrap4スタイルで表示します
- bootstrap_alert: アラートメッセージをBootstrap4スタイルで表示します
テンプレートで呼び出す
テンプレートのヘッダに下記のコードを追加します。
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> {% load bootstrap4 %} <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> </head>
2行目はBootstrapのCSSを読み込む記述、3行目はBootstrap4のテンプレートタグを使用できるようにするための記述です。
自作のCSSを読み込む場合、CSSは後から読み込んだものが優先されるため、BootstrapのCSSよりも後で読み込みましょう。