list.htmlを編集
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{% extends 'base.html' %} {% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %} {% block header%} <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4">Todolist</h1> <p class="lead">TodoListを作って毎日を効率的に過ごしましょう。</p> </div> </div> {% endblock %} {% block content %} <div class='container'> {% for item in object_list %} <div class="alert alert-{{ item.priority }}" role="alert"> <p>{{ item.title }}</p> <a href="{% url 'update' item.pk %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">編集</a> <a href="{% url 'delete' item.pk %}" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">削除</a> <a href="{% url 'detail' item.pk %}" class="btn btn-success" tabindex="-1" role="button" aria-disabled="true">詳細</a> </div> {% comment %} memoは、リンク先にするので削除した {% endcomment %} {% endfor %} </div> {% endblock content %} |
レイアウトを調整する
/listの期日表示をする。
新規作成ボタンを設置する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
{% extends 'base.html' %} {% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %} {% block header%} <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4">Todolist</h1> <p class="lead">TodoListを作って毎日を効率的に過ごしましょう。</p> </div> </div> {% endblock %} {% block content %} <div class='container'> <a href="{% url 'create' %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">新規作成</a> {% for item in object_list %} <div class="alert alert-{{ item.priority }}" role="alert"> <p>{{ item.title }} 期日:{{ item.duedate}}</p> <a href="{% url 'update' item.pk %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">編集</a> <a href="{% url 'delete' item.pk %}" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">削除</a> <a href="{% url 'detail' item.pk %}" class="btn btn-success" tabindex="-1" role="button" aria-disabled="true">詳細</a> </div> {% comment %} memoは、リンク先にするので削除した {% endcomment %} {% endfor %} </div> {% endblock content %} |
/detail.htmlの見た目を修正する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{% extends 'base.html' %} {% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %} {% block header%} <div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-4">詳細画面</h1> <p class="lead">todoの詳細です。</p> </div> </div> {% endblock %} {% block content %} <div class='container'> <div class="alert alert-success" role="alert"> <p>タイトル:{{ object.title }}</p> <p>中身:{{ object.memo }}</p> <p>期日:{{ object.duedate }}</p> </div> </div> {% endblock content %} |

これにて完成
![]() |
![]() |
---|
コメントを残す