本棚アプリケーションの作成【4-7Bootstrapで見た目を整えよう】
Bootstrapの使い方
次のURLからStarter trmplateのコードをコピーします。
コピーしたコードをbook_list.htmlに当てはめていきます。この時必要ないコードは削除して修正します。
bookproject/book/templates/book/book_list.html
{% for item in object_list %}
<ul>
<li>{{ item.title }}</li>
<li>{{ item.text }}</li>
<li>{{ item.category }}</li>
</ul>
{% endfor %}
を
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFl
dvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFl
dvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>本棚アプリ</title>
</head>
<body>
{% for item in object_list %}
<ul>
<li>{{ item.title }}</li>
<li>{{ item.text }}</li>
<li>{{ item.category }}</li>
</ul>
{% endfor %}
</body>
</html>
に編集
レイアウトの調整
今度はさっきのサイトからコードをコピーしてさらにbook_list.htmlを編集していきます。
bookproject/book/templates/book/book_list.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
ldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>本棚アプリ</title>
</head>
<body>
{% for item in object_list %}
<ul>
<li>{{ item.title }}</li>
<li>{{ item.text }}</li>
<li>{{ item.category }}</li>
</ul>
{% endfor %}
</body>
</html>
を
<!doctype html>
<html lang="en">
<head>
<!-- Required mate tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftj
DbrCEXSUloBoqy12QvZ6jIW3" crossorigin="anonymous">
<title>本棚アプリ</title>
</head>
<body>
{% for item in object_list %}
<div class="card">
<h5 class="card-header">{{ item.title }}</h5>>
<div class="card-body">
<p class="card-text">{{ item.text }}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
<h6 class="card-title">{{ item.category }}</h6>>
</div>
</div>
{% endfor %}
</body>
</html>
そしてサーバーを立ち上げてhttp://127.0.0.1:8000/book/ にアクセスすると
(venv) $ python manage.py runserver
このように見た目がきれいになります。