樣式設置
使用Bootstrap庫設置樣式，這是一組工具，用於爲Web應用程序設置樣式，使其在任何現代設備上都看起來很專業，無論是大型的平板顯示器還是智能手機。爲此，將使用應用程序django-bootstrap3。
【1】應用程序django-bootstrap3
安裝django-bootstrap3，在活動的虛擬環境中執行如下命令：pip install django-bootstrap3
在settings.py的INSTALLED_APPS 中添加如下代碼，在項目中包含應用程序django-boostrap3,以及在settings.py的末尾添加代碼，讓django-bootstrap3包含jQuery，這是一個JavaScript庫，能夠使用Bootstrap模板提供的一些交互式元素。
INSTALLED_APPS = [
# skip
'django.contrib.staticfiles',
# 第三方應用程序
'bootstrap3',
# 我的應用程序
'learning_logs',
'users'
]
# skip
# 我的設置
LOGIN_URL = '/users/login/'
# django-bootstrap3的設置
BOOTSTRAP3 = {
'include_jquery':True
}
【2】使用Bootstrap設置項目的樣式
要查看Bootstrap提供的模板，可訪問http://getbootstrap.com/ ，單擊Getting Started，再向下滾動到Examples部分，並找到Navbars in action。將使用模板Static top navbar，它提供了簡單的頂部導航條、頁面標題和用於放置頁面內容的容器。
【3】修改base.html
{##}
{#<p>#}
{# <a href="{% url 'learning_logs:index' %}">Learning Log</a>-#}
{# <a href="{% url 'learning_logs:topics' %}">Topics</a>#}
{# {% if user.is_authenticated %}#}
{# Hello, {{ user.username }}.#}
{# <a href="{% url 'users:logout' %}">log out</a>#}
{# {% else %}#}
{# <a href="{% url 'users:register' %}">register</a> -#}
{# <a href="{% url 'users:login' %}">log in</a>#}
{# {% endif %}#}
{#</p>#}
{##}
{#{% block content %}{% endblock content %}#}
{% load bootstrap3 %} <!--加載django-bootstrap3中的模板標籤集-->
<!DOCTYPE html>
<html lang="en"> <!-將這個文件聲明爲使用英語編寫的HTML文檔-->
<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 %} <!--使用了django-bootstrap3的一個自定義模板標籤，它讓Django包含所有的Bootstrap樣式文件。-->
{% bootstrap_javascript %}
</head>
<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' %}">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><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div> <!-- /container -->
</body>
</html>
在瀏覽器中加載“學習筆記”的主頁：
（調整窗口的大小，使其非常窄；此時導航欄將變成一個按鈕，如果你單擊這個按 鈕，將打開一個下拉列表，其中包含所有的導航鏈接。）
index.html
{% extends "learning_logs/base.html" %}
{% block header %} <!--定義header 塊包含的內容-->
<div class='jumbotron'> <!--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 content %}
首頁：
login.html
{% 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' %}">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button name="submit" class="btn btn-primary">log in</button>
{% endbuttons %}
<input type="hidden" name="next" value="{% url 'learning_logs:index' %}" />
</form>
{% endblock content %}
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" class="btn btn-primary">add topic</button>
{% endbuttons %}
</form>
{% endblock content %}
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 new topic</h3>
{% endblock content %}
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> <!-- panel -->
{% empty %}
There are no entries for this topic yet.
{% endfor %}
{% endblock content %}
對其他頁面一一做了更改。
