pip install django-bootstrap4

INSTALLED_APPS = [
    # My apps.
    'polls.apps.PollsConfig',
    'learning_logs',
    'users',

    # Third party apps.
    'bootstrap4',

    # Default django apps.
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

    学习笔记 -
    主题 -
    {% if user.is_authenticated %}
      你好，{{ user.username }}.
      注销
    {% else %}
      注册 -
      登录
    {% endif %}


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

{% load bootstrap4 %}




    
    
    

    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}

3.3 定义页面的主要部分

  

    

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

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

4. 使用Jumbotron设置主页样式

login.html

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

{% block page_header %}
  
登入你的账号
{% endblock page_header %}

{% block content %}
  

      {% csrf_token %}
      {% bootstrap_form form %}
      {% buttons %}
        登录
      {% endbuttons %}

      
  

{% endblock content %}

5. 设置主题页面样式

topics.html

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

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

{% block content %}
  

      {% for topic in topics %}
        

            {{ topic }}
        
      {% empty %}
        
当前还没有添加过主题。
      {% endfor %}
  

  
添加一个新主题

{% endblock content %}

6. 设置主题页面的条目样式

topic.html

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

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

{% block content %}
  

      添加新条目
  

    {% for entry in entries %}
      

        

          {{ entry.date_added|date:'Y-m-d H:m:s' }}
          
            编辑条目
        
        

          {{ entry.text|linebreaks }}
        
  
      

      
    {% empty %}
      
当前主题还没有添加过条目。
    {% endfor %}

{% endblock content %}

7. 设置条目页面样式

new_entry.html

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

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

{% block content %}

  
添加新条目：

  

      {% csrf_token %}
      {{ form.as_p }}
      添加条目
  

{% endblock content %}

edit_entry.html

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

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

{% block content %}

  
编辑条目：

  

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

{% endblock content %}

8. 页面效果

主页：

主题页：

条目页：

条目编辑页面：