博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Django实战(5):引入bootstrap,设置静态资源
阅读量:5247 次
发布时间:2019-06-14

本文共 1521 字,大约阅读时间需要 5 分钟。

生成了Product类的scaffold,但是如同。所以按照《Agile Web Development with Rails 4th》中的迭代计划,下一步的修改是美化list页面:

但是这个界面还是太丑陋了。其实,有了后,很多站点都变成了“又黑又硬”的工具条+“小清新”风格。我们即不能免俗,又懒得自已设计风格,不妨用bootstrap将产品清单界面重新设计成如下的风格:

下面让我们来实现这个界面。显然web界面会使用一些静态资源(css,js,image等),

要在Django中引入静态资源)。Django在正式部署的时候对于静态资源有特殊的处理,在开发阶段,可以有简单的方式让静态资源起作用。

首选在project目录下面创建一个static目录,并将静态资源按合理的组织方式放入其中:

static/

      css/

           bootstrap.min.css

      js/

      images/

      productlist.html

其中productlist.html是请界面设计师实现的产品清单静态页面;css/bootstrap.min.css 是该页面使用的样式表,来自bootstrap,将来整个系统都将使用这一套样式风格;js目录现在为空,以后可以将javascript代码放在这里;images文件夹同理。

 

我们可以看到,Django对于静态内容的管理非常符合管理。相比之下,rails要求你将静态内容放到很怪异的结构中:

app/assets/

     images/

     javascripts/

     stylesheets/

界面设计师实现的界面要想运行起来,还需要修改相关的路径,或者改变自己的目录设置习惯。这种设计让人难以理解。

 

回到Django,让静态资源起作用只需要简单的配置(下面的做法只适用于开发阶段):

修改settings.py的static files小节:

 

import os... ...# Additional locations of static filesHERE = os.path.dirname(__file__)STATICFILES_DIRS = (    # Put strings here, like "/home/html/static" or "C:/www/django/static".    # Always use forward slashes, even on Windows.    # Don't forget to use absolute paths, not relative paths.    HERE+STATIC_URL,)

 

然后在urls.py中增加static的url映射:

 

from django.contrib.staticfiles.urls import staticfiles_urlpatterns... ...# for development only# This will only work if DEBUG is True.urlpatterns += staticfiles_urlpatterns()

 

启动server,就可以通过http://127.0.0.1:8000/static/productlist.html看到设计好的界面了。

源代码:http://download.csdn.net/detail/thinkinside/4036963

在下一节,终于可以修改模板,美化产品清单页的样式了。

转载于:https://www.cnblogs.com/holbrook/archive/2012/01/31/2357354.html

你可能感兴趣的文章
我的Hook学习笔记
查看>>
EasyUI DataGrid 中字段 formatter 格式化不起作用
查看>>
海量数据存储
查看>>
js中的try/catch
查看>>
简单的分页
查看>>
Find them, Catch them POJ - 1703(带权并查集)
查看>>
进阶篇-安卓系统:4.安卓手机动作传感器
查看>>
CGLib动态代理原理及实现
查看>>
Rhythmk 一步一步学 JAVA (16) dom4j 操作XML
查看>>
JAVA_OA(五):SpringMVC接受传入页面的参数值
查看>>
装饰器与函数的多层嵌套
查看>>
初入web知识点(三)
查看>>
CSS样式 vertical-align:middle 垂直居中生效情况
查看>>
RESTFul API
查看>>
[导入]玫瑰丝巾!
查看>>
自动从网站上面下载文件 .NET把网站图片保存到本地
查看>>
【识记】 域名备案
查看>>
STL uva 11991
查看>>
MY SQL的下载和安装
查看>>
自定义OffMeshLink跳跃曲线
查看>>