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

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. zepto源码研究 - zepto.js - 1

    简要:网上已经有很多人已经将zepto的源码研究得很细致了,但我还是想写下zepto源码系列,将别人的东西和自己的想法写下来以加深印象也是自娱自乐,文章中可能有许多错误,望有人不吝指出,烦请赐教. 首 ...

  2. [BZOJ]3737 [Pa2013]Euler

    从这个FB开始写博客啦. 也不知道会坚持多久…… = =似乎要加一句转载请注明出处 http://www.cnblogs.com/DancingOnTheTree/p/4026076.html htt ...

  3. R2：获取一个event_base

    原文链接:http://www.wangafu.net/~nickm/libevent-book/Ref2_eventbase.html 创建一个event_base 在你使用任何有意思的Libeve ...

  4. ruby on rails 中render的使用

    最近写ror,因为比较菜,很多东西不知道,只能看一点查一点了 render 先上点搜集的常用方式 render :action => "long_goal", :layout ...

  5. 2016最新一元云购完整源码 云购CMS系统 带安卓和ios手机客户端 源码免费分享

    原文转自:http://www.zccode.com/thread-724-1-1.html 该资源说明: 看起来不错的一套一元云购CMS源码,源码包里面带了安卓和ios手机客户端,手机客户端需要自己 ...

  6. Dom4j修改xml文档

    1. 写出内容到xml文档 XMLWriter writer = new XMLWriter(OutputStream, OutputForamt) wirter.write(Document); 2 ...

  7. d029: 求出2－100之间的所有质数（素数）

    内容: 求出2-100之间的所有质数(素数) 输入说明: 无 输出说明: 一行一个素数 /* 质数又称素数.指在一个大于1的自然数中,除了1和此整数自身外,不能被其他自然数(不包括0)整除的数. */ ...

  8. CentOS下安装postgresql

    一.说明 postgresql版本:9.4.1 安装包: postgresql94-server-9.4.1-1PGDG.rhel6.x86_64.rpm postgresql94-libs-9.4. ...

  9. atof

    So given a string like "2.23" your function should return double 2.23. This might seem eas ...

  10. Altium designer PCB中过孔铺地连接的设置

    在Altium designer 6及更高版本如Altium Designer Winter 9.altium designer summer 9都会有这样的问题,在Altium DXP2004里面是 ...