DjangoでBootstrap4を使う方法

Django Python HTMLCSS

概要

 こんにちは、すずです。

 

私自身webアプリを作っていくのは楽しいのですが、あまり自分でやりたくないのがフロントエンド系の処理です...（やれとか言わないで..）

 

特にcssに至っては開発段階では書いてすらいなかったですｗ

そこで今回は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ファイルを書くときにclass=''でBootstrap4のclassを定義すれば可能になります！
ちなみにTEMPLATESのところに書き込むことでtemplatetagsとして使えるようになってます(^^)/

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>

普段書かないので*******でごまかしましたｗ
もちろんclassの定義は

以外でも使えます～Buttonとかね('_')

ちなみにBootstrap4のclassについて見やすくまとめれているサイトがあったので紹介しておきます
webnetamemo.com

medium.com

まとめ

ここまでドヤで紹介してきたのですが、私自身まだまだ使いこなせておりませんｗ

他の人の使い方などを見てみると
ある程度はBootstrap4のクラスで書いて、
プラスで独自CSSファイルを作るのがベターらしいですよ($・・)/~~~

Bootstrap4だけで書いてしまうとオリジナル感がなくなるからだと思います
皆様もBootstrap4依存はお気を付けて！

もし使えないとかだったら連絡ください！
Twitterにもらえると反応しやすいです↓↓

twitter.com