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

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. 工作流activiti-03数据查询（流程定义 流程实例 代办任务） 以及个人小练习

    在做数据查询的时候通过调用api来查询数据是相当的简单 对分页也进行了封装listPage(0, 4) ;listPage:分页查询 0:表示起始位置,4:表示查询长度 但是公司的框架封装了分页数据  ...

  2. 微信 回复多图文 借助php框架

    private function replyMostPhoto($data,$arr){$this->logger("已经到达回复多图文!".$arr[0]['Title'] ...

  3. CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  4. PHPの页面跳转-常见方法

    PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header( ...

  5. 19个非常有用的 jQuery 图片滑动插件和教程

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入精美的效果.今天 ...

  6. iOS 3D Touch功能 3 -备

    新的触摸体验——iOS9的3D Touch 一.引言 二.在模拟器上学习和测试3D Touch 附.SBShortcutMenuSimulator的安装和使用 三.3D Touch的主要应用 四.3D ...

  7. 转：支撑Github的开源技术

    原文来自于:http://www.infoq.com/cn/news/2014/03/projects-power-github Github在3月19号开放了新的项目展示页面(Showcase),S ...

  8. [布局] bootstrap基本标签总结

    文件头: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...

  9. js new Date().Format

    /** * * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符 * 年(y)可以用 1-4 ...

  10. 【转】android UI进阶之实现listview中checkbox的多选与记录--不错

    原文网址:http://www.cnblogs.com/notice520/archive/2012/02/17/2355415.html 今天继续和大家分享涉及到listview的内容.在很多时候, ...