django備忘録11 Bootstrap Grid System

参照サイト

try-django-1.8 というjustinさんのサイトを参考に学習を進めています。 https://www.youtube.com/watch?v=KsLHt3D_jsE

markdown記法の備忘録用のリンク Markdown記法 チートシート - Qiita

bootstrap grid system

CSS · Bootstrap

• 検証　で、pageのpixelを確認してみる。

• にすると、画面fullになる。

• navbar.html も、

  にすると、画面fullになる。

• media もgridで管理できる。

CSS · Bootstrap

• example_fluid.html というファイルを作ってそこに、gridの例をコピペしてみる。 base.html, blockcontent などもしておく。

{% extends "base.html" %}

{% block jumbotron %}
{% endblock %}

{% block content %}

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

{% endblock %}

• views.pyのredering のtemplatesを、 return render(request, "example_fluid.html",context)　のように変える。これで、ブラウザの大きさを調節して、columの動きを見られる。

• example_fluid.html の修正

<div class="row">
  <div class="col-md-8 col-sm-6" style='background-color:red;'>.col-md-8</div>
  <div class="col-md-4 col-sm-6" style='background-color:green;'>.col-md-4</div>
</div>

これで、md, smの時で、大きさが調整できる。色をつけるとわかりやすい。

• さらにexample_fluid.htmlの修正

<div class="row">
    <div class="col-md-8 col-sm-6" style='background-color:red;'>.col-md-8
        <div class="row">
            <div class="col-md-6 col-sm-8" style='background-color:blue;'>.col-md-4</div>
            <div class="col-md-6 col-sm-4" style='background-color:orange;'>.col-md-4</div>
        </div>
    </div>
  <div class="col-md-4 col-sm-6" style='background-color:green;'>.col-md-4</div>
</div>

とかにすると、１行目の下にさらにcolumを作れる。

• ３つとかにすると訳が分からなくなるから、２つくらいまでかな。