teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

説明を大幅に追記しました。 【追記】以降をご査収ください。

2021/01/19 09:00

投稿

_whitecat_22
_whitecat_22

スコア1305

answer CHANGED
@@ -10,4 +10,79 @@
10
10
  {{ item.created_by.get_full_name }}
11
11
  ```
12
12
 
13
- 参照元のアプリ自体は、ログインしたユーザーには、それ以外のユーザーの情報は見えないように考慮された設計になっているようです。
13
+ 参照元のアプリ自体は、ログインしたユーザーには、それ以外のユーザーの情報は見えないように考慮された設計になっているようです。
14
+
15
+
16
+
17
+ ---
18
+ 【追記】
19
+
20
+ 入力フォームは「django-crispy-forms」というライブラリが使われているため、入力項目の見出しをオフにしたり複数項目をインライン表示するような柔軟性に欠けます。
21
+ フォームに手を加えたい(自由度を高めたい)場合は "django-bootstrap4" を使います。
22
+ こちらで入力フィールド毎に細かい制御をしましょう。
23
+
24
+ [django-bootstrap4](https://django-bootstrap4.readthedocs.io/en/latest/)
25
+
26
+  
27
+
28
+ ```requirement.txt
29
+ Django==2.1.2
30
+ django-bootstrap4==2.0.1 # django-crispy-forms==1.7.2 より変更
31
+ django-widget-tweaks==1.4.8 # 追加
32
+ django-filter==2.0.0
33
+ pytz==2018.5
34
+ ```
35
+
36
+ requirement.txt からのインストールで上手く行かない場合は、こちらのコマンドでインストールしてください。
37
+ (2.0.1 より新しいバージョンですと、Django 2.2以上にしか対応していないです。ご注意を。)
38
+
39
+ ```Terminal
40
+ $ pip install django-bootstrap4==2.0.1
41
+ ``` 
42
+  
43
+ config/setting.py
44
+ ```pyhon
45
+ INSTALLED_APPS = [
46
+ (略)
47
+ 'django.contrib.staticfiles',
48
+ 'bootstrap4', # 'crispy_forms' から変更
49
+ 'widget_tweaks', # 追加
50
+ 'users.apps.UsersConfig',
51
+ 'app.apps.AppConfig',
52
+ ]
53
+ ```
54
+
55
+  
56
+ /app/templates/app/item_form.html
57
+ ```html
58
+ {% extends "./_base.html" %}
59
+ {% bootstrap_css %} <!-- {% load crispy_forms_tags %} より変更 -->
60
+ {% bootstrap_javascript jquery='full' %} <!-- 追加 -->
61
+ {% load widget_tweaks %} <!-- 追加 -->
62
+ {% block content %}
63
+ {{ form.certifications.errors }}
64
+ <div class="container">
65
+ <div class="row">
66
+ <div class="col-12">
67
+ <h2 class="text-center">登録・更新</h2>
68
+ </div>
69
+ (略)
70
+ <div class="row">
71
+ <div class="col-12">
72
+ <form method="post" id="myform">
73
+ {{form.as_p}} <!-- {% crispy form %} より変更 -->
74
+ </form>
75
+ </div>
76
+ </div>
77
+ (略)
78
+ {% endblock %}
79
+ ```
80
+
81
+  
82
+  
83
+ 参照元;
84
+ [[Python] プログラム初心者のためのWebアプリ簡単作成法 - 4.カスタマイズのヒント -- 画面デザインの変更](https://qiita.com/okoppe8/items/4cc0f87ea933749f5a49#%E7%94%BB%E9%9D%A2%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%A4%89%E6%9B%B4)
85
+
86
+ [DjangoでBootstrap4を使う方法](https://qiita.com/S2notC2/items/82808558383a773da942)
87
+
88
+ [Bootstrap4の導入・設定と、bootstrap4テンプレートを各画面で共有する/django3.0](https://arakan-pgm-ai.hatenablog.com/entry/2019/01/28/090000)