设置样式
(env) learning_log$ pip install 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, initialscale=1">
<title>Learning Log</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<!-- Static nabar -->
<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="`" 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 %}
</div>
<div>
{% block content %}{% endblock %}
</div>
</div><!-- /container -->
</body>
</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 content %}
{% 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 %}
{{ form.as_p}}
{% 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 %}
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
<h2>Topics</h2>
{% 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>
<a href = "{% url 'learning_logs:new_topic' %}" >Add a new topic:</a>
{% endblock content %}
{% 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 %}
<li> No entries have been added yet.</li>
{% endfor %}
{% endblock content %}
- 照猫画虎修改edit_entry.html和new_entry.html
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
<h2>Edit Eentry:</h2>
{% endblock header%}
{% block content %}
<h2><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></h2>
<form action = "{% url 'learning_logs:edit_entry' entry.id %}" method='post'
class="form">
{% csrf_token %} <!--
{{ form.as_p }} <!--
{% buttons %}
<button name='submit' class="btn btn-primary">save changes</button>
{% endbuttons%}
</form>
{% endblock content %}
{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}
{% block header %}
<h2>Add a new entry:</h2>
{% endblock header%}
{% block content %}
<h2><a href="{% url 'learning_logs:topic' topic.id %}">{{ topic }}</a></h2>
<form action = "{% url 'learning_logs:new_entry' topic.id %}" method='post'
class="form">
{% csrf_token %} <!--
{{ form.as_p }} <!--
{% buttons %}
<button name='submit' class="btn btn-primary">add entry</button>
{% endbuttons%}
</form>
{% endblock content %}