---恢复内容开始---
1：在app下建立static文件夹并且放入bootstrap文件包以及一个写好的css文件style.css。文件目录如下：
style.css代码：
.form-control {
display: inline-block;
}
.add_button {
margin: 10px 0px 10px 0px;
}
.checkbox {
margin-top: 20px;
}
.completed_item {
text-decoration: line-through;
}
h1 {
display: inline-block;
color: #292b33;
}
body {
background-color: #f6f6f6;
}
.text_holder {
display: block;
max-width: 100%;
word-wrap: break-word;
}
#main {
margin-top: 150px;
background-color: #ffffff;
border-radius: 5px;
width: 50%;
border: 1px solid #545454;
}
1：在与project同级的目录下建立文件夹templates（若用pycharm则已经建立完毕），在templates文件夹下建立index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{% load extra %} #后面过滤器的引入，这儿先不管
{% load staticfiles %} #引入static文件（关于settings.py中的static路径查找问题pycharm会自动解决，不需要设置） <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}"> #注意这儿以及下面的路径的引入方式
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/jquerysctipttop.css' %}">
<script Type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script>
function foo2(type,id){
url = "http://127.0.0.1:8000/dedi/?p1="+type+"&p2="+id;
window.location.href=url;
}
function checked2() {
var x=document.getElementById('showlist');
x.className = "list-group-item completed_item";
}
</script> </head> <body>
<div class="container" id="main">
<h1>ToDoList</h1>
<form action="" role="form" id="main_input_box">
<label>
<input type="text" class="form-control" id="custom_textbox" name="Item" placeholder="还有什么事情需要做?">
<input type="submit" value="Add-or-update" class="btn btn-primary add_button">
</label>
</form>
<!------------------展示部分------------------------->
<ol class="list-group list_of_items">
{% for content in contents %}
<li class="list-group-item" id="showlist">
<div class="text_holder">
{{ content.content }}----{{ content.time|Stime }} #Stime为自定义过滤器，后面再介绍
<div class="btn-group pull-right">
<input type="button" value="delete" onclick="foo2('delete',{{ content.id }})" text="删除" class="delete btn btn-warning">
<input type="button" value="edit" onclick="location.href='http://127.0.0.1:8000/dedi/?p1='+{{ content.id }}" text="修改" class="edit btn btn-success">
</div>
</div>
<div style="clear: both;"></div>
<div class="checkbox">
<label><input type="checkbox" class="pull-right" onclick="foo2('completed',{{ content.id }})"></label>
</div>
</li>
{% endfor %}
</ol> <div class="paginator" style="float: right;padding-bottom: 5;">
<span class="step-links">
{% if contents.has_previous %}
<a href="?page={{ contents.previous_page_number }}">previous</a>
{% endif %}
<span class="current">
page{{ contents.number }} of {{ contents.paginator.num_pages }}
</span>
{% if contents.has_next %}
<a href="?page={{ contents.next_page_number }}">next</a>
{% endif %}
</span>
</div> </div>
</body> </html>
到此模板部分就完成了，模板中的部分东西会放到下一章视图里面讲解，有些地方不明了请不要着急