【python3】第20章设置项目“学习笔记”的样式

A、应用程序django-bootstrap3

一、安装django-bootstrap3

pip install django-bootstrap3

二、项目中添加django-bootstrap3

settings.py

# django-bootstrap3的设置
BOOTSTRAP3 = {
    'include_jquery': True,
}
 
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
 
    # 第三方应用程序
    'bootstrap3',
 
    # My apps
    'learning_logs',
    'users',
]

B、使用Bootstrap来设置项目“学习笔记”的样式

三、修改base.html-定义头部

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>
</html>

{% bootstrap_css %}和{% bootstrap_javascript %}为django-bootstrap3的一个自定义模板的标签，它让Django包含所有的Bootstrap样式文件

四、修改base.html-定义导航栏

base.html

<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="nav navbar-nav navbar-right">
                {% if user.is_authenticated %}
                    <li><a>Hello, {{ user.username }}</a></li>
                    <li><a href="{% url "users:logout" %}"></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>
    </div>
     
</nav>
</body>

五、修改base.html-定义页面的主要部分

base.html

...
</nav>
 
<div class="container">
    <div class="page-header">
        {% block header %}{% endblock %}
    </div>
    <div>
        {% block content %}{% endblock %}
    </div>
</div> <!--/container-->
 
</body>
</html>

B、使用jumbotron来设置主页的样式

六、使用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 you're learning about.
    </h2>
    <h2>Whenever you learn something new about a topic, make an entry summarizing what you've learned.</h2>
{% endblock %}

C、设置登陆页面的样式

七、设置登陆页面的样式

login.html

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
 
{% block header %}
    <h2>Log in to your account.</h2>
{% endblock header %}
 
{% block content %}
    <form action="{% url "users:login" %}" method="post" class="form">
        {% csrf_token %}
        {% bootstrap_form form %}
 
        {% buttons %}
            <button name="submit" class="btn btn-primary">log in</button>
        {% endbuttons %}
 
        <input type="hidden" name="text" value="{% url "learning_logs:index" %}"/>
    </form>
{% endblock content %}

删除了{% if form.errors %}， 因为django-bootstrap3会自动管理表单错误。这里用{% bootstrap_form %}来显示表单，这个替换了原来使用的标签{{ form.as_p }}，

{% bootstrap_form %}将Bootstrap样式规则应用于各个表单元素。{% buttons %}是bootstrap3起始模板标签，它将Bootstrap样式应用于按钮。

D、设置new_topic页面的样式

八、设置new_topic页面的样式

new_topic.html

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
 
{% block header %}
    <h2>Add a new topic:</h2>
{% endblock header %}
 
{% block content %}
    <form action="{% url 'learning_logs:new_topic' %}" method="post" class="form">
        {% csrf_token %}
        {% bootstrap_form form %}
 
        {% buttons %}
            <button name="submit">add topic</button>
        {% endbuttons %}
    </form>
 
{% endblock content %}

D、设置topics页面的样式

九、设置topics页面的样式

topics.html

{% extends "learning_logs/base.html" %}
 
{% 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 %}

E、设置topic页面中条目的样式

十、设置topic页面中条目的样式

topic.html

{% extends "learning_logs/base.html" %}
{% 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>
 
    {% empty %}
        There are no entries for this topic yet.
    {% endfor %}
{% endblock content %}