Home / Django / Djangoメモ:Templates – base.htmlの作成方法及びBootstrapを適用させる方法

Djangoメモ:Templates – base.htmlの作成方法及びBootstrapを適用させる方法

基本形

1.  templateフォルダに、base.htmlファイルを作成します。header用としてブロックを作成するため、”header”としていますが、名前は任意です。

{% blcok header %}
(反映・表示箇所)
{% endblock header %}
{% block content %}
(反映・表示箇所)
{% endblock content %}

2. 作成したtodomodel_listのコードをいったん消して以下の通りコーディングし上書きします。{% extends ‘base.html’ %} は、base.htmlを適用させるために必要です。以下例ではfor文でまわした場合の記述方法です。

{% extends 'base.html' %}

{% block header %}
ToDoリスト:
{% endblock header %}
{% block content %}
{% for item in object_list %}
{{ item.title }}
{{ item.note }}
{% endfor %}
{% endblock content %}

Bootstrapを適用させたbase.html

1.  templateフォルダに、base.htmlファイルを作成した上で、Bootstrapのウェブサイトから、IntroductionのStarter templateをコピペします。Bodyでデフォルトで入っている<h1>Hello, world!</h1>を削除し、以下の通り差し替えします。

Bootstrapの該当ページはこちら

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   {% block header %}

   {% endblock header %}
   {% block content %}
   
   {% endblock content %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

2.作成したtodomodel_listを、装飾させたい箇所のみ、Bootstrapのコンポーネント等で装飾。以下は例になります。Todoリストに管理画面(トップ)らしくなるようにいくつかCSS以外に変更等してあります。

{% extends 'base.html' %}

{% block header %}
<div class="jumbotron jumbotron-fluid">
  <div class="container"> 
    <h1 class="display-4">ToDo LIST</h1>
    <p style="color:black; font-size:16px;"class="lead"> 
      Time is money, time is organized by Daily management
    </p>
  </div>
</div>
{% endblock header %}

{% block content %}
<div class='container'> 
{% for item in object_list %}

<div class="alert alert-primary" role="alert">
  <p>{{ item.title }}</P>
  <a href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">編集</a>
  <a href="#" class="btn btn-success" tabindex="-1" role="button" aria-disabled="true">削除</a>
  <a href="#" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">詳細</a>
</div>

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

Bootsrapの操作方法が分からない方はこちらに纏めたものがありますのでご参考ください。

Djangoメモ:Bootstrapの設定

Check Also

Djangoメモ:Bootstrapの設定

CSSをゼロから作らなくても手 …