# 昨日知识点回顾
使用Bootstrap设置项目“学习笔记”的样式
# 今日知识点学习
20.1.3 修改base.html
1.定义HTML头部
# base.html
{% load bootstrap4 %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>Learning Log</title>
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
</head>2.定义导航栏
# base.html
---snip---
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
<a class="navbar-brand" href="{% url 'learning_logs:index' %}">
Learning Log</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>
<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'%}">
Topics</a></li>
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<span class="navbar-text">Hello, {{ user.username }}.</span>
</li>
<li class="nav=item">
<a class="nav-link" href="{% url 'users:logout' %}">Log out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:register' %}">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'users:login' %}">Log in</a></li>
{% endif %}
</ul>
</div>
</nav>3.定义页面的主要部分
# base.html
{% load bootstrap4 %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>Learning Log</title>
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
<a class="navbar-brand" href="{% url 'learning_logs:index' %}">
Learning Log</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>
<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'%}">
Topics</a></li>
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<span class="navbar-text">Hello, {{ user.username }}.</span>
</li>
<li class="nav=item">
<a class="nav-link" href="{% url 'users:logout' %}">Log out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:register' %}">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'users:login' %}">Log in</a></li>
{% endif %}
</ul>
</div>
</nav>
<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>主页效果：
20.1.4 使用jumbotron设置主页样式
# index.html
{% extends "learning_logs/base.html" %}
{% block page_header %}
<div class="jumbotron">
<h1 class="display-3">Track your Learning.</h1>
<p class="lead>Make your own Learning Log, and keep a list of the
topics you're learning about. Whenever you learn something new
about a topic, make an entry summarizing what you've learned.</p>
<a class="btn btn-lg btn-primary" href="{% url 'users:register' %}"
role="button">Register »:</a>
</div>
{% endblock page_header %}20.1.5 设置登录页面的样式
# login.html
{% extends "learning_logs/base.html" %}
{% load bootstrap4 %}
{% block page_header %}
<h2>Log in to your account.</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">Log in</button>
{% endbuttons %}
<input type="hidden" name="next"
value="{% url 'learning_logs:index' %}" />
</form>
{% endblock content %}主页效果：
20.1.6 设置显示所有主题的页面的样式
# topics.html
{% extends "learning_logs/base.html" %}
{% block page_header %}
<h1>Topics</hi>
{% endblock page_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><h3>No topics have been added yet.</h3></li>
{% endfor %}
</ul>
<h3><a href="{% url 'learning_logs:new_topic' %}">Add a new topic</a></h3>
{% endblock content %}20.1.7 设置单个主题的页面中的条目样式
