2022/06/02学习内容
整理时间：2022/06/03
参考资料：《python编程从入门到实践》

1.应用程序django-bootstrap3
2.使用Bootstrap设置项目“学习笔记”样式
3.使用jumbotron设置主页样式
4.设置登录页面样式
5.设置new_topic页面样式
6.设置topics页面样式
7.设置topic页面中条目样式

应用程序django-bootstrap3

1）安装django-bootstrap3

# 控制台
pip install django-bootstrap3

2）修改I:learning_loglearning_logsettings.py
添加第三方应用程序
django-bootstrap3包含jQuery,使用Bootstrap模板交互式元素

# I:learning_loglearning_logsettings.py

# 添加第三方应用程序
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # 第三方应用程序
    'django-bootstrap3',

    # 我的应用程序
    'learning_logs',
    'users',
]

# django-bootstrap3包含jQuery,使用Bootstrap模板交互式元素
# 末尾：django-bootstrap3设置
BOOTSTRAP3={
    'include_jquery':True,
}

使用Bootstrap设置项目“学习笔记”样式

修改I:learning_loglearning_logstemplateslearning_logsbase.html
1）定义HTML头部
2）定义导航栏
3）定义页面主要部分

{% load bootstrap3 %}


    
        
        
        

        
        {% bootstrap_css %}
        {% bootstrap_javascript %}
    

    
        
        

        


            

                {% block header %}{% endblock header %}
            
            

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

    

注意：若出现 No module named ‘bootstrap3’ 错误
可从以下三个方面检查
（1）检查setting.py “,逗号是否遗漏”
（2）末尾加 STATICFILES_DIRS = ( os.path.join(BASE_DIR, ‘static’), )
（3）虚拟环境下pip install django-bootstrap3
将bootstrap3文件夹复制到项目目录下
非虚拟环境下安装django-bootstrap3
pip install -i https://pypi.doubanio.com/simple/ --trusted-host pypi.doubanio.com --target=d:everythingpython368libsite-packages django-bootstrap3

使用jumbotron设置主页样式

修改I:learning_loglearning_logstemplateslearning_logsindex.html

# I:learning_loglearning_logstemplateslearning_logsindex.html
{% extends "learning_logs/base.html" %}

{% block header %}
    

        
Track your learning.
    
{% endblock header %}

{% block content %}
    

        Register an account to make
        your own Learning Log, and list the topics you're learning about.
    
    

        When you learn something new about a topic, make an entry
        summarizing what you've learned.
    
{% endblock content %}

设置登录页面样式

修改I:learning_loguserstemplatesuserslogin.html

# I:learning_loguserstemplatesuserslogin.html
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}

{% block header %}
  
Log in to your account.
{% endblock header %}

{% block content %}

    

        {% csrf_token %}
        {% bootstrap_form form %}

        {% buttons %}
            log in
        {% endbuttons %}

        
    

{% endblock content %}

设置new_topic页面样式

修改I:learning_loglearning_logstemplateslearning_logsnew_topic.html

# I:learning_loglearning_logstemplateslearning_logsnew_topic.html
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}

{% block header %}
  
Add a new topic:
{% endblock header %}

{% block content %}

    

        {% csrf_token %}
        {% bootstrap_form form %}

        {% buttons %}
            add topic
        {% endbuttons %}
    
    
{% endblock content %}

设置topics页面样式

修改I:learning_loglearning_logstemplateslearning_logstopics.html

# I:learning_loglearning_logstemplateslearning_logstopics.html
{% extends "learning_logs/base.html" %}

{% block header %}
  
Topics
{% endblock header %}

{% block content %}

Topics

    {% for topic in topics %}
    

        
            {{ topic }}
        
    
    
    {% empty %}
    

        No topics have been added yet.
    
    {% endfor %}


    
    	 Add a new topic:
    

{% endblock content %}

设置topic页面中条目样式

修改I:learning_loglearning_logstemplateslearning_logstopic.html

# I:learning_loglearning_logstemplateslearning_logstopic.html
{% extends "learning_logs/base.html" %}

{% block header %}
  
{{ topic }}
{% endblock header %}

{% block content %}


    add new entry

    {% for entry in entries %}
        

            

                
                    {{ entry.date_added|date:'M d, Y H:i'}}
                    
                        
                            edit entry
                    
                
            

            

                {{ entry.text|linebreaks }}
            
        

    {% empty %}
        There are no entries for this topic yet.
    {% endfor %}

{% endblock content %}