16.python学习笔记-页面样式（python 页面设计）

zhezhongyun 2025-05-03 17:51 56 浏览

上一章我们完成了“学习笔记”Web应用程序的大部分功能，本章我们将通过Bootstrap对页面样式进行美化，这样会让我们的项目看起来更加专业。

页面样式

Bootstrap主页地址：

https://getbootstrap.com/

Bootstrap主页：

Bootstrap可以看作一个大型样式设置工具集，提供了大量模版用于设置页面样式，创建独特的项目总体风格。

1.下载安装

我们将使用django_bootstrap5将Bootstrap包含到项目当中，执行如下命令，下载安装django_bootstrap5：

pip install django_bootstrap5

2.注册第三方应用

修改项目的setting.py，将django_bootstrap5作为第三方应用程序注册到项目当中：

3.设置base.html的样式

修改base.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>学习笔记</title>
  <!-- 加载bootstrap的样式 -->
  {% load django_bootstrap5 %}
  {% bootstrap_css %}
  {% bootstrap_javascript %}

</head>
<body>
  <!-- 定义导航栏 -->
  <nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
    <div class="container-fluid">
      <a class="navbar-brand" href="{% url 'learning_logs:index' %}">
          学习笔记</a>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <li class="nav-item">
            <a class="nav-link" href="{% url 'learning_logs:topics' %}">
              主题列表</a></li>
        </ul> <!-- End of links on left side of navbar -->

        <!-- Account-related links -->
        <ul class="navbar-nav ms-auto mb-2 mb-md-0">

          {% if user.is_authenticated %}
            <li class="nav-item">
              <span class="navbar-text me-2">你好， {{ user.username }}.
                </span></li>
          {% else %}
            <li class="nav-item">
              <a class="nav-link" href="{% url 'accounts:register' %}">
                  注册</a></li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'accounts:login' %}">
                  登录</a></li>
          {% endif %}

        </ul> <!-- End of account-related links -->

        {% if user.is_authenticated %}
          <form action="{% url 'accounts:logout' %}" method='post'>
            {% csrf_token %}
            <button name='submit' class='btn btn-outline-secondary btn-sm'>
              注销</button>
          </form>
        {% endif %}

      </div> <!-- Closes collapsible parts of navbar -->

    </div> <!-- Closes navbar's container -->
  </nav> <!-- End of navbar -->
<!--div可以看作一个包含其他内容的容器，class属性设置块样式-->
  <main class="container">
    <div class="pb-2 mb-2 border-bottom">
      {% block page_header %}{% endblock page_header %}
    </div>

    <div>
      {% block content %}{% endblock content %}
    </div>
  </main>

</body>
</html>

3.设置index.html的样式

修改index.html：

{% extends 'learning_logs/base.html' %}

{% block page_header %}
  <div class="p-3 mb-4 bg-light border rounded-3">
    <div class="container-fluid py-4">
      <h1 class="display-3">记录您感兴趣的内容</h1>
      
      <p class="lead">使用学习笔记，每当您遇到感兴趣的内容，
        创建一个新主题，通过条目分类记录下来。</p>

      <a class="btn btn-primary btn-lg mt-1"
          href="{% url 'accounts:register' %}">注册 >></a>
    </div>
  </div>
{% endblock page_header %}

4.设置topics.html的样式

修改topics.html：

{% extends 'learning_logs/base.html' %}

{% block page_header %}
  <h1>所有主题</h1>
{% endblock page_header %}

{% block content %}

  <ul class="list-group border-bottom pb-2 mb-4">
    {% for topic in topics %}
      <li class="list-group-item border-0">
        <a href="{% url 'learning_logs:topic' topic.id %}">
          {{ topic.text }}</a>
      </li>
    {% empty %}
      <li class="list-group-item border-0">还没有创建任何主题。</li>
    {% endfor %}
  </ul>

  <a href="{% url 'learning_logs:new_topic' %}">创建主题</a>

{% endblock content %}

5.修改new_topic.html

{% extends "learning_logs/base.html" %}

{% block content %}
  <p>创建主题:</p>

  <form action="{% url 'learning_logs:new_topic' %}" method='post'>
    {% csrf_token %}
    {{ form.as_p }}
    <button name="submit">保存</button>
  </form>

{% endblock content %}

6.修改new_entry.html

{% extends "learning_logs/base.html" %}

{% block content %}

  <p><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></p>

  <p>创建条目:</p>
  <form action="{% url 'learning_logs:new_entry' topic.id %}" method='post'>
    {% csrf_token %}
    {{ form.as_p }}
    <button name='submit'>保存</button>
  </form>

{% endblock content %}

7.修改new_entry.html

{% extends "learning_logs/base.html" %}

{% block content %}

  <p><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></p>

  <p>编辑条目:</p>

  <form action="{% url 'learning_logs:edit_entry' entry.id %}" method='post'>
    {% csrf_token %}
    {{ form.as_p }}
    <button name="submit">保存</button>
  </form>

{% endblock content %}

测试页面样式

从上面修改过程可以看到，修改页面样式，并不需要修改后段代码，这正是MTV（模型M，模板T和视图V）模式带来的好处。

1.启动服务器

python manage.py runserver

2.使用浏览器访问

http://127.0.0.1:8000

3.默认主页展示

4.登录成功

5.创建新主题

6.点击主题列表

7.点击特定主题

8.创建新条目

HTML button name 属性

上一篇：第8天 | 14天搞定Vue3.0，事件处理(详细)
下一篇：Excel常用技能分享与探讨(5-宏与VBA简介 VBA之用户窗体-高级用法)

16.python学习笔记-页面样式（python 页面设计）

页面样式

测试页面样式

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

利用webSocket实现消息的实时推送

谈谈websocket跨域

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）