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

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. 三维FEM的刚度矩阵数量级

    刚刚在调试三维的FEM代码,随手把全局刚度矩阵在FULL的情况下保存到了dat文件里. 注意,这个仅仅是一个半径为十的球的刚度矩阵 居然3.6G!!吓坏了!!截个图,留个纪念.还是老老实实用spars ...

  2. HTML5 canvas中的转换方法

    转换方法 scale(scalewidth,scaleheight)                缩放当前绘图至更大或更小 scalewidth         缩放当前绘图的宽度 (1=100%, ...

  3. Java在ACM中的使用

    1.基本框架   import java.oi.*;   import java.util.*   public class Main   {   public static void main(St ...

  4. php实现网页HTML标签补全方法

    如果你的网页内容的html标签显示不全,有些表格标签不完整而导致页面混乱,或者把你的内容之外的局部html页面给包含进去了,我们可以写个函数方法来补全html标签以及过滤掉无用的html标签. php ...

  5. 启动任务StartTask（） 发送完消息队列 自己删除，接收方一直显示数据 用OSQFlush(Str_Q); //清空消息队列 下面纠结接收不到了 哈哈

    在建立工程的时候,启动任务StartTask()  启动了任务MyTask(),也建立了消息队列,然后发送消息队列,发送完自己删除了自己,在接收方一直能接受到数据???为何??? 因为我们的消息队列未 ...

  6. IOS NSUserDefaults 讲解 用法

    IOS NSUserDefaults 讲解 用法    NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名.密码之类的,个人觉得使用NSUserDefaults ...

  7. 转：分享13款PHP开发框架

    文章来自于:http://mashable.com/2014/04/04/php-frameworks-build-applications/ Building software applicatio ...

  8. PYTHONE的WHILE，BREAK,CONTINUE示例

    简短示例: while True: s = raw_input('Enter something : ') if s == 'quit': break if len(s) < 3: print ...

  9. AD 删除一个区域里的所有布线，不删除元器件，丝印等

    想删除一个区域里的所有布线,不删除元器件,丝印等 按F12后输入以下组合:isvia or(istrack and OnTopLayer) or (istrack and OnBottomLayer) ...

  10. 设置mysql数据库的密码

    mysql>set password=password("......");