django備忘録12 Styling MVP Landing Part 1

Styling MVP Landing Part 1

• views.py　のtemplatesを return render(request, "home.html",context)　二変更す。

• home.html を編集する。jumbotron_contentを編集する。

{% block jumbotron_content %}
<div class="row">
    <div class="col-sm-8">
        <h1>サイト名</h1>
        <p>サイト名は、〜〜〜〜</p>
        <p>目的は、〜〜〜〜</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">Sign up! &raquo;</a>
        </p>
    </div>
    <div class="col-sm-4" style="background-color:black;min-height:300px">

    </div>
</div>
{% endblock %}

ポイントは、 1. jumbotron_content の中にも、row classを作れる。 2. background-colorを変えるとわかりやすい 3. min-heightとかを設定しておくとたかさなどを設定できる。 とか。

• とかで、columを右に置くことができる。

• Simple

  とかで、

  タグにclass=leadをつけられる。

例えば、こんな感じ

<div class="row">
    <div class="col-sm-3 pull-right">

        <p class='lead'>{{ title }}</p>

        <form method='POST' action=''>{% csrf_token %}
        {{ form|crispy }}

        <input class='btn btn-primary' type='submit' value='Sign Up'/>
        </form>
    </div>
    <div class="col-sm-3">
        <p class='lead'>Simple</p>
    </div>
    <div class="col-sm-3">
        <p class='lead'>Fast</p>
    </div>
    <div class="col-sm-3">
        <p class='lead'>Cheap</p>
    </div>
</div>