---恢复内容开始---

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>

到此模板部分就完成了，模板中的部分东西会放到下一章视图里面讲解，有些地方不明了请不要着急

pd的django To Do List教程-----3：模板的建立的更多相关文章

  1. pd的django个人博客教程----1：效果展示等

    开发环境同to do list 1:首页:localhost/pd/ 2:导航栏测试或者生活点入: 测试:localhost/category/?cid=1 3:点击文章后进入文章显示页面 e.g:进 ...

  2. pd的django To do list教程-----（2）models模型的建立

    1:在models.py中建表 from django.db import models class Tcontent(models.Model): content = models.CharFiel ...

  3. pd的django To do list 教程------（1）说明与展示

    1:开发环境:windows7+django1.8+Python2.7+mysql数据库 2:开发工具:pycharm 3:说明与展示 以上就是最后的页面,可以完成添加,删除,编辑,已完成(勾选che ...

  4. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

  5. Django REST FrameWork中文教程2:请求和响应

    从这一点开始,我们将真正开始覆盖REST框架的核心.我们来介绍几个基本的构建块. 请求对象REST框架引入了Request扩展常规的对象HttpRequest,并提供更灵活的请求解析.Request对 ...

  6. Django REST framework 中文教程1:序列化

    建立环境 在我们做任何事情之前,我们将使用virtualenv创建一个新的虚拟环境.这将确保我们的包配置与我们正在开展的任何其他项目保持良好的隔离. virtualenv envsource env/ ...

  7. Django 博客开发教程目录索引

    Django 博客开发教程目录索引 本项目适合 0 基础的 Django 开发新人. 项目演示地址:Black & White,代码 GitHub 仓库地址:zmrenwu/django-bl ...

  8. Windows 10 搭建 Django 环境（详细教程）

    Windows 10 搭建 Django 环境(详细教程) https://blog.csdn.net/HappyLittleMouse/article/details/81360272#1.%20P ...

  9. 我的django之旅（二）模板和静态文件

    我的django之旅(二)模板和静态文件 标签(空格分隔): django 1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个 ...

随机推荐

  1. c++中 cin、cin.get()、cin.getline()、cin.getchar()的区别

    ①cin>>:无法接收空格.Tap键且以空格.Tap键.回车符为分隔符: ②cin.get( ):可以接收空格.Tap键且以回车符为结束符: 一:可输入单个字符 格式: char ch; ...

  2. uva 484 - The Department of Redundancy Department

    已有的数据结构装不下数据,或者不能处理现有的数据,那就必须要思考其他的辅助手段,辅助结构: #include <cstdio> #include <map> #include ...

  3. Oracle数据库之PL/SQL游标

    1. 游标概念 字面意思是游动的光标,是指向上下文区域的句柄或指针. 在PL/SQL块中执行CRUD操作时,ORACLE会在内存中为其分配上下文区.用数据库语言来描述游标就是:映射在上下文区结果集中一 ...

  4. 如何解析复杂的C语言声明

    C语言中有时会出现复杂的声明,比如   char * const * (*next) (); //这是个什么东东?   在讲复杂声明的分析方法前,先来个补充点.   C语言变量的声明始终贯彻两点 :  ...

  5. Domj4读取xml文件

    节点: Iterator Element.nodeIterator(); //获取当前标签节点下的所有子节点 标签: Element Document.getRootElement(); //获取xm ...

  6. 大整数算法[11] Karatsuba乘法

    ★ 引子         前面两篇介绍了 Comba 乘法,最后提到当输入的规模很大时,所需的计算时间会急剧增长,因为 Comba 乘法的时间复杂度仍然是 O(n^2).想要打破乘法中 O(n^2) ...

  7. 图的建立——邻接矩阵表示（C语言+VC6.0平台）

    图的邻接矩阵表示及其建立(无向图) #include <stdio.h> #include <stdlib.h> typedef char VertexType;        ...

  8. Oracle 存储过程介绍

    存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 IS 3 BEGIN 4 NULL; 5 END; 行1: CREATE OR REPLACE PROCEDURE ...

  9. DDMS中File Explorer无法查看data/data文件解决办法

    http://www.cnblogs.com/smyhvae/p/3881477.html  找了个连接 问题描述:最近在学习Android SQLite中的SQLiteOpenHelper,使用SQ ...

  10. C写的扫描器源码

    Title:C写的扫描器源码 --2010-10-27 20:02 无意间看见的一个源代码,弄回来读下. ----------------------------------------------- ...