文章目录
- 往期回顾
- 设置项目的样式
-
- [应用程序 jdango-bootstap3](#应用程序 jdango-bootstap3)
-
- [bootstrap 下载](#bootstrap 下载)
- [将下载好的 bootstrap 加入到项目](#将下载好的 bootstrap 加入到项目)
- 为使用交互元素在bootstrap中加入jQuery
- [修改 base.html](#修改 base.html)
- [用 jumbotron 设置主页的样式](#用 jumbotron 设置主页的样式)
- 设置登录页面的样式
- [设置 new_topic 页面样式](#设置 new_topic 页面样式)
- [设置 topics 页面的样式](#设置 topics 页面的样式)
- [设置 topic 页面中条目的样式](#设置 topic 页面中条目的样式)
- 改后效果
往期回顾
用Django 写学习笔记程序第二章.1 让用户能够输入数据
用Django 写学习笔记程序第二章.3让用户拥有自己的数据
更多内容移步至个人主页
项目进展：
当前我们的学习笔记程序功能已齐备，但并没有进行样式的设置。尚且也只是在本地环境中运行着，本章节，我们将对程序进行样式设置，并将其部署到服务器上，让更多的人可以接触使用。
样式：设置样式将使用 Bootstrap 库，这是一组用于 Web应用程序设置样式的工具。
部署：将学习笔记部署至 Heroku，以便更多人可以访问，而Git帮助我们跟踪对这个项目所做的修改。
设置项目的样式
应用程序 jdango-bootstap3
使用 jdango-boostap3来将Boostap继承到项目中。
在虚拟环境中，下载：
bootstrap 下载
python
# 激活虚拟环境
ll_env\Scripts\activate
# 安装命令
pip install django-bootstrap3
将下载好的 bootstrap 加入到项目
在 settings.py 的 INSTALLED_AOOS 中添加：
python
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# 添加自己的模型
'learning_logs',
'users',
'bootstrap3',
]为使用交互元素在bootstrap中加入jQuery
这里我们还需要让 bootstrap3 包含 jQuery(JavaScripts库)，它会让我们能够使用Bootstrap模板提供的一些交互元素。
python
# settings.py
# django-bootstrap3的设置
BOOTSTRAP ={
'include_jquery': True,
}准备好上述内容，我们开始对页面进行设置
修改 base.html
修改 base.html 模板，是为了使用 Bootstrap模板，我们把 base.html 分成几个部分进行分别改动。
定义 HTML 头部
python
<!--加载django-bootstrap3中的模板标签集-->
{% 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>定义导航栏
此步骤定义页面顶部的导航栏
html
<body>
<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' %}">log out</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><body> 起始标签
<nav> 表示页面的导航链接部分，该元素内的所有内容都将根据选择器 navbar、
navbar-default、navbar-static-top定义的Bootstrap样式规则来设置样式，
选择器决定特定样式规则将应用于页面上的哪些元素。
定义页面的主要部分
base.html的剩余部分包含页面的主要部分：
html
<!--与 nav标签同级-->
<div class="container">
<div class="page-header">
{% block header %}{% endblock header%}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div>class 属性为 container，div是网页的一部分，可用于任何目的，并通过边框，元素周
围的空间、内容、边距之间的距离、背景色和其他样式规则来设置样式。
div是一个容器，其中包含两个元素：一个新增的名为header的块，它负责告诉用户页面
包含哪些信息以及用户可在页面上执行的操作；其class属性值page-header将一系列样
式应用于这个块。content块是一个独立的div，未使用class属性指定样式。
用 jumbotron 设置主页的样式
下面使用新定义的header块及另一个名为jumbotron的Bootstrap元素修改主页。
jumbotron元素是一个大框框，可包含你想放入的东西，通常用于在主页中呈现项目的简要描述。
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 lear something new about a topic, make an entry
summarizing what you've learned.
</h2>
{% endblock content %}设置登录页面的样式
修改登录表单的界面
python
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
<h2>Log in to your account.</h2>
{% endblock 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">log in</button>
{% endbuttons %}
<input type="hidden" name="text" value="{% url 'learning_logs:index' %}" />
</form>
{% endblock content %}设置 new_topic 页面样式
python
{% 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" class="btn btn-primary">add topic</button>
{% endbuttons %}
</form>
{% endblock content %}设置 topics 页面的样式
python
{% extends "learning_logs/base.html" %}
{% block header %}
<h1>Topics</h1>
{% endblock header %}
{% block content %}
<P>Topics</P>
<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 %}设置 topic 页面中条目的样式
python
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% 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 %}改后效果
我感觉我眼睛瞎了，被闪的...太tm好看了...当然对比之前。
