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

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. MFC 堆栈溢出 test dword ptr [eax],eax ; probe page.

    今天调试程序的时候,发现一个奇怪的问题,之前调试都没问题的,今早加了一点东西,就出现错误,跳到调试位置,如下4行红色部分 ; Find next lower page and probe cs20: ...

  2. IO流文件字符输入输出流，缓冲流

    由于字节输入输出流在操纵Unicode字符时可能有乱码现象 于是就有了操作字符的输入输出流 Reader ,Writer和他们的子类FileReader,FileWrite(其实就是用来辅助构造的 W ...

  3. [转]SGI STL 红黑树(Red-Black Tree)源代码分析

    STL提供了许多好用的数据结构与算法,使我们不必为做许许多多的重复劳动.STL里实现了一个树结构-Red-Black Tree,它也是STL里唯一实现的一个树状数据结构,并且它是map, multim ...

  4. X-Y Problem

    X-Y Problem 对于X-Y Problem的意思如下: 1)有人想解决问题X2)他觉得Y可能是解决X问题的方法3)但是他不知道Y应该怎么做4)于是他去问别人Y应该怎么做? 简而言之,没有去问怎 ...

  5. Flume 1.4.0 User Guide

    Apache Flume is a distributed, reliable, and available system for efficiently collecting, aggregatin ...

  6. HashMap工作原理

    hashmap存储的为key-value键值对,get的时间复杂度是O(1),具体实现原理如下: 1. hashmap是基于数组之上,通过一定算法,用空间转换时间 2. hashmap的数据结构为数组 ...

  7. 转载：Java连接MySQL 数据库的正确操作流程

    转载网址:http://www.bitscn.com/pdb/mysql/201005/186551.html       以下的文章主要介绍的是Java连接MySQL 数据库(以MySQL数据库为例 ...

  8. 无效的过程调用或参数: 'Instr'解决方法

    以前我一直使用ASP无组件上传类来上传文件.但是今天又个客户反映说.不能上传.出现错误.,但在我电脑上测试没问题.后来发现客户用的是IE8 于是开始找解决方法 错误如下:Microsoft VBScr ...

  9. 父Prefab与子prefab问题

    PrefabRevolution 原文:http://framebunker.com/blog/poor-mans-nested-prefabs/   (溜还是老外溜啊) 有些时候需要在Prefab里 ...

  10. [LeetCode 116 117] - 填充每一个节点的指向右边邻居的指针I & II (Populating Next Right Pointers in Each Node I & II)

    问题 给出如下结构的二叉树: struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *next; } ...