D21 Django-bootstrap 网站美化工程 (1)

来试着稍微美化一下网页排版
试试看使用别人包好的Django with Bootstrap
console

pip install django-bootstrap-v5

在设定中安装
docsystem_5/settings.py

INSTALLED_APPS = [
    "bootstrap5",
]

之後要在网页中导入css
要加入这两句
{% load bootstrap5 %}
{% bootstrap_css %}
然後可以参考 https://bootstrap5.hexschool.com/docs/5.0/getting-started/introduction/
去修改需要的版面
templates/doc/main.html

{% block content %}
{% load bootstrap5 %}
{% bootstrap_css %}

<div class="container text-end">
    <a href="{% url 'auth_info:profile' %}">My Profile</a> | 
    <a href="{% url 'doc_info:user_list' %}">My Documents</a> |
    {% if user.is_authenticated %}
    <a href="{% url 'account_logout' %}">Logout</a>
    {% else %}
    <a href="{% url 'account_login' %}">Login</a>
    {% endif %}
    <p>Welcome {{ user.first_name }} {{ user.last_name }}</p>
</div>

<div class="container">
    <div class="text-center">
        <p class="h2">Document List</p>
    </div>
    <div class="text-center">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th class="col-2">Create date: </th>
                    <th class="col-2">Last modified date:</th>
                    <th class="col-1">Author</th>
                    <th class="col-3">Title</th>
                    <th class="col-3">Remark</th>
                </tr>
            </thead>
            <tbody>
                {% for doc in Doc_warehouse %}
                <tr>
                    <td>{{ doc.create_date }}</td>
                    <td>{{ doc.last_mod_date }}</td>
                    <td>{{ doc.user }}</td>
                    <td>{{ doc.title }}</td>
                    <td>{{ doc.remark }}</td>
                {% endfor %}
                </tr>
            </tbody>
        </table>
    </div>
    <div class="text-center">
        <p>
        {% for page_number in Doc_warehouse.paginator.page_range %}
            {% ifequal page_number  Doc_warehouse.number %}
            {{ page_number }}
            {% else %}
            <a href="?page={{ page_number }}">{{ page_number }}</a>
            {% endifequal %}
        {% endfor %}
        </p>
    </div>
</div>

{% endblock %}

修改前的画面
Imgur
修改後的画面
Imgur