読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

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

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>