概要
こんにちは、すずです。
今回はBootstrap4というcss作業が格段に楽になるアイテムを使っていこうと思います!
同じ悩みを抱える人の力になれれば幸いです。
環境
Python 3.7.2
Django 2.1.7
django-bootstrap4 0.0.8
やり方
まずはdjango-bootstrap4をpipでインストールしましょう!
C:\Users\user> pip install django-bootstrap4
インストールが完了しましたら次の工程へ
djang-bootstrap4の設定をsettings.pyに記述します!
※スマホの方見えずらくて申し訳ございません<(_ _)>横にしてね..泣
# mysite/mysite/settings.py
INSTALLED_APPS = [
'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', # ここに追加!
],
},
},
]
これでsettings.pyの設定は完了です!
htmlファイルではこんな感じにしてくだせぇ↓↓
# mysite/index.html
<!DOCTYPE html>
{% load static %}
{% bootstrap_css %} # これを書かないとタグが適応されないよ( ;∀;)
{% bootstrap_javascript jquery='full' %}
<head>
<meta charset="UTF-8">
<title>*******</title>
</head>
<body>
<div class="Bootstrap定義のクラス名">
***************
***************
***************
</div>
</body>
</html>
普段書かないので*******でごまかしましたw
もちろんclassの定義は