今回の記事は、Webアプリの形を整えるためにcssフレームワークのbootstrapを使ってhtmlの見た目を整える方法に関する記事です。
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の結果を反映できています。
ご確認ください。
以上今回は実装できてるかどうかまででした！！
コメント