导入
使用 Bootstrap 样式化页面
查看导航栏和首页如何更新以添加 Bootstrap 样式。
我们已经实现了网站的基本功能，现在是时候开始对网站进行美化了。我们将使用 Bootstrap，这是一个包含 HTML、CSS 和 JavaScript/jQuery 代码的库，提供了多种酷炫的功能和设计选项。
使用 Bootstrap
我们将使用 Bootstrap 5 来美化网站。设置方式有多种，到目前为止我们一直使用 pip install 安装包，但这次我们将采用不同的方法：将所需的代码直接添加到 base.html 模板中。这些代码可以在 Bootstrap 5 的启动模板中找到（点击此处）。
点击 运行 按钮，查看更新后的导航栏，感受 Bootstrap 的样式效果。
No configuration found for ID: 442decf9f41d4457b6f23e7278204eaf99ad5ebc057682b39cf67af029983cee
首页已更新
打开 首页 模板（listings/templates/listings/index.html），替换其中的以下代码：
1{% extends "listings/base.html" %} 2 3{%block content%} 4 5<main> 6 <div class="container py-4"> 7 8 <div class="p-5 mb-4 bg-warning rounded-3"> 9 <div class="container-fluid py-5"> 10 <h1 class="display-5 fw-bold">自行车查找器</h1> 11 <p class="col-md-8 fs-4">查找最新的自行车、零件、配件等。</p> 12 <button class="btn btn-dark btn-lg" type="button"><a class="text-light" href="{% url 'listings:all_listings' %}">探索</a></button> 13 </div> 14 </div> 15 16 <div class="row align-items-md-stretch"> 17 <div class="col-md-6"> 18 <div class="h-100 p-5 text-white bg-dark rounded-3"> 19 <h2>更快地买卖</h2> 20 <p>找到附近的人，建立联系，达成交易，收款完成。</p> 21 </div> 22 </div> 23 <div class="col-md-6"> 24 <div class="h-100 p-5 text-white bg-dark border rounded-3"> 25 <h2>无限发布</h2> 26 <p>注册账户后立即开始发布，无限制！无费用！</p> 27 </div> 28 </div> 29 </div> 30 31 <footer class="pt-3 mt-4 text-muted border-top"> 32 © 自行车查找器 2021 33 </footer> 34 35 </div> 36</main> 37 38{%endblock content%}
点击 运行 按钮保存更改并运行应用。当应用运行时，您将看到已用 Bootstrap 美化后的更新版 首页。
列表页面已更新
接下来编辑显示所有列表的页面。打开 列表 模板（all_listings.html），按如下方式修改其代码：
1{% extends "listings/base.html" %} 2 3{%block content%} 4 5<div class="container text-center p-3" style="width:500px;"> 6 <h1 class="text-dark">列表</h1> 7 <div class="form-group"> 8 <div class="card card-body bg-light text-dark rounded"> 9 <form method="get"> 10 <div class="row"> 11 <div class="col-md-3"> 12 {{ my_Filter.form.condition|as_crispy_field }} 13 </div> 14 <div class="col-md-3"> 15 {{ my_Filter.form.state|as_crispy_field }} 16 </div> 17 <div class="col-md-3"> 18 {{ my_Filter.form.city|as_crispy_field }} 19 </div> 20 <div class="col-md-3 p-2"> 21 <button class="btn btn-warning border-dark mt-4" type="submit">搜索</button> 22 </div> 23 </div> 24 </form> 25 </div> 26 </div> 27</div> 28 29<div class="container"> 30 <div class="card card-body bg-light text-dark text-center p-3"> 31 {% for listing in all_listings %} 32 <img class="card-img-right img-thumbnail" src="{{ listing.main_photo.url }}" width=300px height=200px style="max-height:200px" alt="连接"> 33 <img class="card-img-right img-thumbnail" src="{{ listing.photo_1.url }}" width=300px height=200px style="max-height:200px" alt="连接"> 34 <p><b>标题：</b>{{ listing.title }}</p> 35 <p><b>状况：</b>{{ listing.condition }}</p> 36 <p><b>销售类型：</b>{{ listing.sale_type }}</p> 37 <p><b>价格：</b>$ {{ listing.price|floatformat:2 }}</p> 38 <p><b>位置：</b>{{ listing.city }}, {{ listing.state }}</p> 39 <p><b>发布日期：</b>{{ listing.list_date }}</p> 40 <ul><a class="btn btn-warning border-dark" href="{% url 'listings:detail' listing.id %}">查看列表</a></ul> 41 <hr> 42 {% endfor %} 43 </div> 44</div> 45 46{%endblock content%}
我们将搜索筛选器和列表内容分别放入两个独立的容器中。所有文字和图片均居中显示，您会注意到展示列表的容器背景颜色略有变化。
我的列表页面已更新
打开 my_listings.html，替换为以下代码：
1{% extends "listings/base.html" %} 2 3{% block content %} 4 5<h2 class="text-center mb-3">我的列表：</h2> 6 7<div class="row"> 8 <div class="col"> 9 <div class="container text-center p-3"> 10 <table class="table text-center"> 11 <tr> 12 <th>商品</th> 13 <th>发布日期</th> 14 <th></th> 15 <th></th> 16 <th></th> 17 </tr> 18 {% for my_listing in my_listings %} 19 <tr> 20 <td>{{ my_listing.title }}</td> 21 <td>{{ my_listing.list_date }}</td> 22 <td><a class="btn btn-warning" href="{% url 'listings:detail' my_listing.id %}">查看</a></td> 23 <td><a class="btn btn-warning" href="{% url 'listings:edit_listing' my_listing.id %}">编辑</a></td> 24 <td><a class="btn btn-warning" href="{% url 'listings:delete_listing' my_listing.id %}">删除</a></td> 25 </tr> 26 {% endfor %} 27 </table> 28 <div class="container text-center"> 29 <a class="btn btn-warning" href="{% url 'listings:new_listing' %}">新建列表</a> 30 </div> 31 </div> 32 </div> 33</div> 34 35{% endblock content %}
这些改动可能不太明显，但我们为用于查看、编辑和删除列表的按钮增加了样式。
详情页面已更新
打开 detail.html，按如下方式修改代码：
1{% extends "listings/base.html" %} 2 3{%block content%} 4<div class="container"> 5 <div class="row p-5"> 6 <div class="col"> 7 <h3 class="text-dark mb-4">列表详情：</h3> 8 <p><b>标题：</b>{{ detail.title }}</p> 9 <p><b>状况：</b>{{ detail.condition }}</p> 10 <p><b>商品类型：</b>{{ detail.product_type }}</p> 11 <p><b>销售类型：</b>{{ detail.sale_type }}</p> 12 <p><b>价格：</b>$ {{ detail.price }}</p> 13 <p><b>位置：</b>{{ detail.city }}, {{ detail.state }}</p> 14 <p><b>联系邮箱：</b>{{ detail.contact_email }}</p> 15 <p><b>发布日期：</b>{{ detail.list_date }}</p> 16 </div> 17 <div class="col-4 mt-4"> 18 <img class="card mb-3" src="{{ detail.main_photo.url }}" width=350px height=300px style="max-width: 100%; max-height: 100%;" /> 19 {% if detail.photo_2 %} 20 <img class="card" src="{{ detail.photo_2.url }}" width=350px height=300px style="max-width: 100%; max-height: 100%;" /> 21 {% endif %} 22 </div> 23 <div class="col-4 mt-4"> 24 <img class="card" src="{{ detail.photo_1.url }}" width=350px height=300px style="max-width: 100%; max-height: 100%;" /> 25 </div> 26 </div> 27</div> 28 29{%endblock content%}
对于 详情页面，每条列表的图片将以适合用户查看的合理尺寸展示。如果您愿意，也可以调整图片的尺寸。