django 设置应用程序样式
教程来自 Python Crash Course 2nd.
主要内容：接上一篇django 实现用户账户功能后，使用Bootstrap设置应用样式
目录
1. 安装django-bootstrap4
pip install django-bootstrap4
添加到settings.py中
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',
]
2. 使用Bootstrap
如Navbar static模板
3. 修改base.html
3.1 定义HTML头部
语言设置：zh-CN
修改前：
<p>
<a href="{% url 'learning_logs:index' %}">学习笔记</a> -
<a href="{% url 'learning_logs:topics' %}">主题</a> -
{% if user.is_authenticated %}
你好，{{ user.username }}.
<a href="{% url 'users:logout' %}">注销</a>
{% else %}
<a href="{% url 'users:register' %}">注册</a> -
<a href="{% url 'users:login' %}">登录</a>
{% endif %}
</p>
{% block content %}{% endblock content %}
删除上述代码，写入：
{% load bootstrap4 %}
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>学习笔记</title>
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
</head>
其中，<!doctype html>声明这是HTML文件，<html lang="zh-CN">将语言设置为中文。
head 包含有关文档且未显示在屏幕上的信息元素。title表示标签页标题。
3.2 定义导航栏
body包含 web 页中所有显示的元素，部分常用标签：
<h1>A heading</h1>最重要的标题<h2>A sub-heading</h2>下一层级的标题！<h3>A sub-sub-heading</h3>... 同样，直到<h6><em>text</em>强调文本<strong>text</strong>强烈强调文本<br />跳转到下一行（不能放任何东西在br里面）<a href="链接URL">link</a>创建一个链接<ul><li>first item</li><li>second item</li></ul>产生一个列表<div></div>定义页面上的一个段
接上部分：
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
<a class="navbar-brand" href="{% url 'learning_logs:index'%}">
学习笔记
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav>元素表示页面的导航连接部分，其中的所有内容都根据选择器navbar,navbar-expand-md等定义的Bootstrap样式规则来设置样式。选择器决定了特定样式规则将应用于页面上的哪些元素。
<button>按钮在浏览器窗口太窄、无法水平显示整个导航栏时显示，点击按钮导航元素将以下拉列表形式出现。
接下来打开导航栏新的部分并定义了一个新的链接集合（这里只有一个链接到主题页面的项）：
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'learning_logs:topics' %}">
主题
</a>
</li>
</ul>
接下来是用户已登录和未登录时的导航栏显示：
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<span class="navbar-text">你好，{{ user.username }}.</span>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'users:logout' %}">注销</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:register' %}">注册</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'users:login' %}">登录</a>
</li>
{% endif %}
</ul>
</div>
</nav>
3.3 定义页面的主要部分
<main role="main" class="container">
<div class="pb-2 mb-2 border-bottom">
{% block page_header %}{% endblock page_header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</main>
</body>
</html>
4. 使用Jumbotron设置主页样式
login.html
{% extends "learning_logs/base.html" %}
{% load bootstrap4 %}
{% block page_header %}
<h2>登入你的账号</h2>
{% endblock page_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">登录</button>
{% endbuttons %}
<input type="hidden" name="next"
value="{% url 'learning_logs:index' %}" />
</form>
{% endblock content %}
5. 设置主题页面样式
topics.html
{% extends "learning_logs/base.html" %}
{% block page_header %}
<h1>主题</h1>
{% endblock page_header %}
{% block content %}
<ul>
{% for topic in topics %}
<li><h3>
<a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a>
</h3></li>
{% empty %}
<li><h3>当前还没有添加过主题。</h3></li>
{% endfor %}
</ul>
<h3><a href="{% url 'learning_logs:new_topic' %}">添加一个新主题</a></h3>
{% endblock content %}
6. 设置主题页面的条目样式
topic.html
{% extends "learning_logs/base.html" %}
{% block page_header %}
<h3>{{ topic }}</h3>
{% endblock page_header %}
{% block content %}
<p>
<a href="{% url 'learning_logs:new_entry' topic.id %}">添加新条目</a>
</p>
{% for entry in entries %}
<div class="card mb-3">
<h4 class="card-header">
{{ entry.date_added|date:'Y-m-d H:m:s' }}
<small><a href="{% url 'learning_logs:edit_entry' entry.id %}">
编辑条目</a></small>
</h4>
<div class="card-body">
{{ entry.text|linebreaks }}
</div>
</div>
</li>
{% empty %}
<li>当前主题还没有添加过条目。</li>
{% endfor %}
{% endblock content %}
7. 设置条目页面样式
new_entry.html
{% extends "learning_logs/base.html" %}
{% block page_header %}
<h3><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></h3>
{% endblock page_header %}
{% block content %}
<p>添加新条目：</p>
<form action="{% url 'learning_logs:new_entry' topic.id %}" method="post">
{% csrf_token %}
{{ form.as_p }}
<button name="submit">添加条目</button>
</form>
{% endblock content %}
edit_entry.html
{% extends "learning_logs/base.html" %}
{% block page_header %}
<h3><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></h3>
{% endblock page_header %}
{% block content %}
<p>编辑条目：</p>
<form action="{% url 'learning_logs:edit_entry' entry.id %}" method="post">
{% csrf_token %}
{{ form.as_p }}
<button name="submit">保存改动</button>
</form>
{% endblock content %}
8. 页面效果
主页：
主题页：
条目页：
条目编辑页面：
浙公网安备 33010602011771号