django備忘録17 Styling MVP Landing Part 2
Home Pageのスタイルを整えていく
newsletter/views.py contact のtemplatesの、forms.html を修正していく
まずは、'{% extends "base.html" %}' を追加する
次に、base.htmlのうち、formsを挿入したい箇所を決める。 今回の場合は、block content(contentブロック)に挿入するため、
{% block content %} ... {% endblock %}
を挿入する ※この状態だと、jumbotronが空欄の状態になってしまう。が、今は、leaveしておく
- '{% load crispy_forms_tags %}' を挿入して、
... <form method='POST' action=''>{% csrf_token %} {{ form|crispy }} ...
という感じで、crispyフォームを導入
- フォームの幅を調整するために、div class='row' タグを入れる。
<div class='row'> <div class='col-sm-6'> <form method='POST' action=''>{% csrf_token %} {{ form|crispy }} <input type='submit' value='Submit'/> </form> </div> </div>
- さらに一歩進んで、カラムを、
<div class='col-sm-6 col-sm-offset-3'>
のように設定。以下のリンクが参考になりました!
オフセット・カラム ≪ グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス
カラム数分、右にずらして配置するスタイルのクラス。
とのことです!
- submit にbtn classが付いていないのでつける
<input class='btn btn-default' type='submit' value='Submit'/> ```` * base.html→home.html にjumbotron を移す。 base.html にjumbotronは置かずに、home.htmlに置く base.html には、
{% block jumbotron %}
{% endblock %}
とだけしておいて、home.htmlに、
{% block jumbotron %}
...
{% endblock %}
という感じで挿入する。
- forms.html で、
{% if title %} <div class='row'> <div class='col-sm-12'> <h1>{{ title }}<h1> </div> </div> {% endif %}
という感じで、もしタイトルがあったら、表示されるようにしておく。 現時点では、context にtitleがないため、表示されない。
- views.py のcontact に、試しにtitleを作ってみる
... def contact(request): title = 'Contact Us' ... context = { "form": form, "title": title, } return render(request, "forms.html", context)
- forms.html のtitleのclassに、
<h1 class='text-align-center'>{{ title }}<h1>
という感じで、テキストを中心に配置するcustoms.cssを以前に作成したと思うので、それを利用するう。
- ただ、もっとシンプルに、
forms.html
... <div class='row'> <div class='col-sm-6 col-sm-offset-3'> {% if title %} <h1 class='text-align-center'>{{ title }}</h1> {% endif %} <form method='POST' action=''>{% csrf_token %} ... </form> </div> </div> {% endblock %}
みたいな感じで、まとめてしまっても可。
- さらに、
<h1 class='{% if title_align_center %}text-align-center{% endif %}'>{{ title }}</h1>
みたいに、classの箇所にif文を入れることも可能。