演習課題「Bootstrapを導入した共通テンプレートを利用する」
右の環境には、「myblog」プロジェクトに「news」というアプリケーションが作成してあります。views.pyには、記事一覧を表示するIndexView(generic.ListView)クラスを記述してあります。また、共通テンプレートのbase.htmlは、Bootsrapを利用できるようになっています。
BootstrapでWebページを表示するよう、記事一覧のテンプレート(article_list.html)を修正してください。
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
＃06:共通テンプレートにBootstrapを導入しよう
ここでは、Lunchmapアプリの共通テンプレートを用意します。HTMLフレームワークのBootstrapを導入して、ナビゲーションバーを追加します。
myapp/lunchmap/templates/lunchmap/base.html<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' >
<style>body {padding-top: 80px;}</style>
<title>Lunchmap</title>
</head>
<body>
<nav class='navbar navbar-expand-sm navbar-dark bg-dark fixed-top'>
<a class='navbar-brand' href='{% url "lunchmap:index" %}'>Lunchmap</a>
</nav>
<div class='container'>
{% block content %}
{% endblock %}
</div>
</body>
</html>
myapp/lunchmap/templates/lunchmap/shop_list.html{% extends './base.html' %}
{% block content %}
<h1>お店一覧</h1>
{% for shop in object_list %}
<p>{{ shop.name }}, {{ shop.category.name }}</p>
{% endfor %}
{% endblock %}
- Python Django入門 (4) - Qiita
https://qiita.com/kaki_k/items/6e17597804437ef170ae
- Python Django チュートリアル(6) - Qiita
https://qiita.com/maisuto/items/86add9263a641899b1e3
- Django の概要 - テンプレートを設計する
https://docs.djangoproject.com/ja/2.1/intro/overview/#design-your-templates
- テンプレート | Django documentation | Django
https://docs.djangoproject.com/ja/2.1/topics/templates/