上一章我们完成了“学习笔记”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：

  
  
  
  
  {% load django_bootstrap5 %}
  {% bootstrap_css %}
  {% bootstrap_javascript %}



  
   

  

    

      {% block page_header %}{% endblock page_header %}
    

    

      {% block content %}{% endblock content %}
    
  

3.设置index.html的样式

修改index.html：

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

{% block page_header %}
  

    

      
记录您感兴趣的内容
      
      
使用学习笔记，每当您遇到感兴趣的内容，
        创建一个新主题，通过条目分类记录下来。

      注册 ?
    
  
{% endblock page_header %}

4.设置topics.html的样式

修改topics.html：

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

{% block page_header %}
  
所有主题
{% endblock page_header %}

{% block content %}

  

    {% for topic in topics %}
      

        
          {{ topic.text }}
      
    {% empty %}
      
还没有创建任何主题。
    {% endfor %}
  

  创建主题

{% endblock content %}

5.修改new_topic.html

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

{% block content %}
  
创建主题:

  

    {% csrf_token %}
    {{ form.as_p }}
    保存
  

{% endblock content %}

6.修改new_entry.html

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

{% block content %}

  
{{ topic }}

  
创建条目:
  

    {% csrf_token %}
    {{ form.as_p }}
    保存
  

{% endblock content %}

7.修改new_entry.html

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

{% block content %}

  
{{ topic }}

  
编辑条目:

  

    {% csrf_token %}
    {{ form.as_p }}
    保存
  

{% endblock content %}

测试页面样式

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

1.启动服务器

python manage.py runserver

2.使用浏览器访问

http://127.0.0.1:8000

3.默认主页展示

4.登录成功

5.创建新主题

6.点击主题列表

7.点击特定主题

8.创建新条目