Djangoに Bootstrap4 を導入して楽をしよう
こんにちは、たーき( @Taaaqiii ) です。
Djangoを使って過去に作ったWebアプリケーションを言語バージョンアップとリファクタリングをしているときに、
以前は長いCSSを書いていたのですが、CSSフレームワークをしようしてコードの量を減らそうと思いました。
そこで、今後のアプリ制作で楽をするために、Bootstrapを使ってみようと思います。
導入手順
まずはdjangoでbootstrap4の導入を簡単にしてくれるライブラリの django-bootstrap4 をpipインストールします。
$ pip install django-bootstrap4 Collecting django-bootstrap4 Downloading django_bootstrap4-1.1.1-py3-none-any.whl (26 kB) Collecting beautifulsoup4 Downloading beautifulsoup4-4.8.2-py3-none-any.whl (106 kB) |████████████████████████████████| 106 kB 11.9 MB/s Collecting soupsieve>=1.2 Downloading soupsieve-1.9.5-py2.py3-none-any.whl (33 kB) Installing collected packages: soupsieve, beautifulsoup4, django-bootstrap4 Successfully installed beautifulsoup4-4.8.2 django-bootstrap4-1.1.1 soupsieve-1.9.5
続いて、Djangoの manage.py と同階層 にある setting.py の
INSTALLED_APPS, TEMPLATESのOPTIONS に bootstrap4 を追加します。
# Application definition INSTALLED_APPS = [ 'study.apps.StudyConfig', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'bootstrap4', #<--ここに追加 ] ~~~~~~~~~~ ~~~~~~~~~~ TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [], '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', #<--ここに追加! ], }, }, ]
最後に、テンプレート(base.html)の
でbootstrapの CSSとjavaScriptを読み込む処理を追加します。<head> <title>AppName</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% bootstrap_css %} <!-- ここを追加 --> {% bootstrap_javascript jquery='full' %} <!-- ここを追加 --> </head>
Bootstrap4の使用実例
例えば以下のようにhtmlにナビバーを記述すると、
<nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">AppName</a> <div class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">マイページ</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ユーザ情報</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ログイン</a> </li> <li class="nav-item"> <a class="nav-link" href="#">ログアウト</a> </li> </ul> </div> </nav>
このような表示にしてくれます。