演習課題「テーブルタグにBootstrapを適用する」
右の環境には、「myblog」プロジェクトに「diary」という1行掲示板が作成してあります。
この一覧ページの表組みを、Bootstrapのデザインを利用するように修正してください。表組みには、以下のスタイルを割り当てます。
table table-striped table-hover
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
※ 採点時は、サーバーを起動し、問題文に関するページにアクセスできる状態にしてください。
演習課題「リンクのデザインをボタンに変える」
右の環境には、「myblog」プロジェクトに「diary」という1行掲示板が作成してあります。
この新規ページのリンクを、Bootstrapのボタンを利用するように修正してください。ボタンには、以下のスタイルを割り当てます。
btn btn-primary
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
※ 採点時は、サーバーを起動し、問題文に関するページにアクセスできる状態にしてください。
＃04:Bootstrapでページの見栄えを整えよう
ここでは、Bootstrapを利用して掲示板アプリケーションの見栄えを整えます。Bootstrapには、テーブルタグやボタンに見栄えの良いスタイルが用意してあります。これを利用すれば、アプリケーションのデザインを簡単にレベルアップできます。
myapp/bbs/templates/bbs/index.html{% extends './base.html' %}
{% block content %}
<h1>paiza bbs</h1>
<p>{{ message }}</p>
<table class='table table-striped table-hover'>
{% for article in articles %}
<tr>
<td>{{ article.content }}</td>
<td>{{ article.user_name }}</td>
<td>
<a href='{% url "bbs:detail" article.id %}' class='btn btn-outline-primary'>詳細</a>
<a href='{% url "bbs:delete" article.id %}' class='btn btn-outline-secondary'>削除</a>
</td>
</tr>
{% endfor %}
</table>
<div>
<a href='{% url "bbs:create" %}' class='btn btn-outline-primary'>新規</a>
</div>
{% endblock %}
myapp/bbs/templates/bbs/detail.html{% extends './base.html' %}
{% block content %}
<h1>paiza bbs</h1>
<p>{{ message }}</p>
<p>{{ article.content }}, {{ article.user_name }}</p>
<p>
<a href='{% url "bbs:index" %}' class='btn btn-outline-primary'>一覧</a>
</p>
{% endblock %}
- Python Django入門 (4) - Qiita
https://qiita.com/kaki_k/items/6e17597804437ef170ae
- Python Django チュートリアル(6) - Qiita
https://qiita.com/maisuto/items/86add9263a641899b1e3
- フォームを使う | Django documentation | Django
https://docs.djangoproject.com/ja/2.1/topics/forms/
- 検索フォームをでっちあげる - Python 開発ノート - アットウィキ
https://www58.atwiki.jp/conn1/pages/26.html
- Django フォームの基本 - Python 入門
https://python.keicode.com/django/form-basic.php