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

Djangoroidの奮闘記

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

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>

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

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