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

1：在app下建立static文件夹并且放入bootstrap文件包以及一个写好的css文件style.css。文件目录如下：

　　style.css代码：

 

1 .form-control { 2 display: inline-block; 3 } 4 .add_button { 5 margin: 10px 0px 10px 0px; 6 } 7 .checkbox { 8 margin-top: 20px; 9 }10 .completed_item {11 text-decoration: line-through;12 }13 h1 {14 display: inline-block;15 color: #292b33;16 }17 body {18 background-color: #f6f6f6;19 }20 .text_holder {21 display: block;22 max-width: 100%;23 word-wrap: break-word;24 }25 #main {26 margin-top: 150px;27 background-color: #ffffff;28 border-radius: 5px;29 width: 50%;30 border: 1px solid #545454;31 }

 

 

1：在与project同级的目录下建立文件夹templates（若用pycharm则已经建立完毕），在templates文件夹下建立index.html文件

1  2  3  4     
      5     {% load extra %}                             #后面过滤器的引入，这儿先不管 6     {% load staticfiles %}                       #引入static文件（关于settings.py中的static路径查找问题pycharm会自动解决，不需要设置） 7  8     
                    #注意这儿以及下面的路径的引入方式 9     
     10     
     11     12     22 23 24 25 26     
     
      27         
      
ToDoList
28         
      
       29             
       30             31             32             33         
      
34     
      35         
      
       36             {% for content in contents %}37                 
       
38                     
        
         39                         {
    { content.content }}----{
    { content.time|Stime }}          #Stime为自定义过滤器，后面再介绍40                         
         
          41                             
          42                             
          43                         
         
44                     
        
45                     
        
46                     
        
         47                         
         48                     
        
49                 
50             {% endfor %}51         
      
52 53         
      
       54             
       55                 {% if contents.has_previous %}56                     previous57                 {% endif %}58                 59                     page{
    { contents.number }} of {
    { contents.paginator.num_pages }}60                 61                 {% if contents.has_next %}62                     next63                 {% endif %}64             65         
      
66 67     
     
68 69 70 

 

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