Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

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文を入れることも可能。