概要

こんにちは、すずです。

今回は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>

普段書かないので*******でごまかしましたｗ

もちろんclassの定義は

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

まとめ

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

詳しくはブログで書いていますのでご確認くださいッ

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

Twitterではアプリ作成やアプリの広め方などについて呟いております！

DjangoでBootstrap4を使う方法

概要

環境

やり方

まとめ