40
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

DjangoでBootstrap4を使う方法

Posted at

概要

 こんにちは、すずです。

 今回は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の定義は

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

まとめ

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

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

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

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

40
37
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40
37

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?