文章目录
设置项目样式
Django-bootstrap3 应用程序
使用 bootstrap 设置项目样式
修改 base.html
使用 jumbotron 设置主页样式
设置登录页面的样式
设置 `new_topic` 页面的样式
设置 `topics` 页面样式
设置 `topic` 页面中条目样式
小结
前面已经基本实现了使用 Django 搭建 Web 应用程序项目“学习笔记”：
- Django入门项目搭建
- Django构建Web应用程序添加用户管理
经过前面两步，目前项目功能基本完备，但是黑没有设置样式，并且运行也仅仅只能在本地计算机上运行。
现在，就开始以一种简单的方式设置项目样式，并将其部署到网络服务器上，以方便大家进行访问。
设置样式，将用到 bootstrap 库，这是一组工具，用于为 Web 应用程序设置样式，使得其能够在任何现代设备上都看起来很专业，无论是大型平板还是智能手机。
设置项目样式
之前开发项目仅仅考虑到它的功能性，而没用关注样式设置的问题。这是因为能够正确运行的应用程序才是更重要的，但是当程序能够正确运行后，外观也就很重要了。
接下来，将简单介绍一下关于应用程序 Django-bootstrap3 ，并将其继承到项目中，为部署项目做准备。
Django-bootstrap3 应用程序
将使用 Django-bootstrap3 将 bootstrap 继承到项目中。这个应用程序下载必要的 bootstrap 文件，将它们放在项目的合适位置，能够使得在项目的模版中使用样式设置指令。
安装 Django-bootstrap3.（使用pip）
<.../Scripts> .\python.exe -m pip install --upgrade pip <...\Scripts> .\pip3.8.exe install django-debootstrap3 ERROR: Could not find a version that satisfies the requirement django-debootstrap3 ERROR: No matching distribution found for django-debootstrap3 PS F:\Python实验\实例代码\AlienInvasion\项目（Django）\learning_log_20\11_env\Scripts> .\pip3.8.exe install django-bootstrap3 Collecting django-bootstrap3 Downloading django_bootstrap3-14.2.0-py3-none-any.whl (23 kB) Requirement already satisfied: django<4.0,>=2.2 in f:\python实验\实例代码\alieninvasion\项目（django）\learning_log_20\11_env\lib\site-packages\django-3.1.3-py3.8.egg (from django-bootstrap3) (3.1.3) Requirement already satisfied: asgiref<4,>=3.2.10 in f:\python实验\实例代码\alieninvasion\项目（django）\learning_log_20\11_env\lib\site-packages\asgiref-3.3.1-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (3.3.1) Requirement already satisfied: pytz in f:\python实验\实例代码\alieninvasion\项目（django）\learning_log_20\11_env\lib\site-packages\pytz-2020.4-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (2020.4) Requirement already satisfied: sqlparse>=0.2.2 in f:\python实验\实例代码\alieninvasion\项目（django）\learning_log_20\11_env\lib\site-packages\sqlparse-0.4.1-py3.8.egg (from django<4.0,>=2.2->django-bootstrap3) (0.4.1) Installing collected packages: django-bootstrap3 Successfully installed django-bootstrap3-14.2.0
接下来，需要在 learning_log/settings.py 中的 INSTALLED_APPS 中添加应用程序：
# Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', #第三方应用 'bootstrap3', # 自定义应用 'learning_logs', # 账户管理应用 'users', ]
添加 bootstrap3 应用程序名称，我们需要使得 Django-bootstrap3 包含 jQuery ，这是一个 JavaScript 库，能够使用 bootstrap 模版提供的一些交互元素。所以在 settings.py 末尾添加如下代码：
# Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/3.1/howto/static-files/ STATIC_URL = '/static/' LOGIN_URL = '/users/login/' #django-bootstrap3 设置 BOOTSTRAP3={ 'include_jquery':True, }
添加这样的代码将使得不需要手动下载 jQuery 并能够正确使用。
使用 bootstrap 设置项目样式
bootstrap 基本上就是一个大型的样式设置工具集，还提供了大量的模版，你可将它们应用于项目以创建独特的总体风格。对bootstrap初学者来说，这些模版比各个样式设置工具使用起来要容易得多。要查看bootstrap提供的模版，可以访问：getbootstrap ，单击 Get started ，往下能找到 Examples 部分，并找到 Navbars in action ，这里将使用模版 Static top navbar ，它能提供了简单的顶部导航条、页面标题和用于放置页面内容的容易。
修改 base.html
现在就需要修改 base.html 模版文件，以使用前述 bootstrap 模版。现在将 base.html 分为以下几部分分别修改：
- 定义 HTML 头部
对于 base.html 所做的第一项修改，首先需要在文件中定义 HTML 头部，使得显示“学习笔记”的每个页面时，浏览器标题栏都显示这个网站的名称。此外还需要添加一些在模版中使用 bootstrap 所需要的信息。删除 base.html 的全部代码，输入下面的代码：
{% load bootstrap3 %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Learning Log</title> {% bootstrap_css %} {% bootstrap_javascript %} </head>
- 定义导航栏
下面就需要来定义页面顶部的导航栏：
<body> <!-- Static navbar --> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> </button> <a class="navbar-brand" href="{% url 'learning_logs:index' %}"> Learning Log</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="{% url 'learning_logs:topics' %}">Topics</a></li> </ul> <ul class="navbar-nav navbar-right"> {% if user.is_authenticated %} <li><a>Hello, {{ user.username }}.</a></li> <li><a href="{% url 'users:logout' %}">log out</a></li> {% else %} <li><a href="{% url 'users:register' %}">register</a></li> <li><a href="{% url 'users:login' %}">log in</a></li> {% endif %} </ul> </div><!--/.nav-collapse --> </div> </nav>
- 定义页面的主要部分
剩余部分就是包含页面的主要部分：
<div class="container"> <div class="page-header"> {% block header %}{% endblock header %} </div> <div> {% block content %}{% endblock content %} </div> </div><!-- /container --> </body> </html>
使用 jumbotron 设置主页样式
下面使用新定义的 header 块及另一个名为 jumbotron 的 bootstrap 元素修改主页。 jumbotron 元素是一个大框，相比于页面的其他部分显得很独特，想要在其中包含任何东西都是可以的；通常用于在主页中呈现项目的简要描述。修改 index.html 内容如下：
{% extends "learning_logs/base.html" %} {% block header %} <div class='jumbotron'> <h1>Track your learning.</h1> </div> {% endblock header%} {% block content %} <h2> <a href="{% url 'users:register' %}">Register an account</a> to make your own Learning Log, and list the topics ypu're learning about. </h2> <h2> Whenever you learn something new about a topic, make an entry summarizing what you're learned </h2> {% endblock content %}
设置登录页面的样式
{% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h2>Log in to your account.</h2> {% endblock header %} {% block content %} <form method="post" action="{% url 'users:login' %} class="form"> {% csrf_token %} {% bootstrap_form form %} {% buttons %} <button name="submit" class="btn btn-primary">log in</button> {% endbuttons %} <input type="hidden" name="next" value="{% url 'learning_logs:index' %}" /> </form> {% endblock content %}
设置 new_topic 页面的样式
{% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h2>Add a new topic:</h2> {% endblock header %} {% block content %} <p>Add a new topic:</p> <form action="{% url 'learning_logs:new_topic' %}" method='post' class="form"> {% csrf_token %} {% bootstrap_form form %} {% buttons %} <button name="submit" class="btn btn-primary">add topic</button> {% endbuttons %} </form> {% endblock content %}
设置 topics 页面样式
{% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h1>Topics</h1> {% endblock header %} {% block content %} <ul> {% for topic in topics %} <li> <h3> <a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a> </h3> </li> {% empty %} <li>No topics have been added yet.</li> {% endfor %} </ul> <h3><a href="{% url 'learning_logs:new_topic' %}">Add a new topic:</a></h3> {% endblock content %}
设置 topic 页面中条目样式
{% extends "learning_logs/base.html" %} {% load bootstrap3 %} {% block header %} <h2>{{Topic}}</h2> {% endblock header %} {% block content %} <p> <a href="{% url 'learning_logs:new_entry' topic.id %}">add new entry</a> </p> {% for entry in entries %} <div class="panel panel-default"> <div class="panel-heading"> <h3> {{ entry.date_added|date:'M d, Y H:i' }} <small> <a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a> </small> </h3> </div> <div class="panel body"> {{ entry.text|linebreaks }} </div> </div><!-- panel --> {% empty %} There are no entries for this topic yet. {% endfor %} {% endblock content %}
小结
本篇在前面的Django初始项目基础上，完成了样式的修改，这里使用 bootstrap3 的样式进行修改，通过这样的方式可以参考 bootstrap3 的网站其他样式书写方式编写自己喜欢的显示样式。
本篇最终实现了 “学习笔记” 的效果显示优化，在完成了Web应用的完整开发后，下面就需要将项目移交部署到服务器上以方便大家访问了。（Django项目服务器部署操作请看下一篇内容——会保持积极更新）
*项目中编写的代码已保存到GitHub上供大家参考：GitHub项目
