上一节里我们已经可以使用Django将一个html文件返回给用户了。但是如果我们想将页面做的漂亮点，势必要用到css样式、js脚本等辅助工具加以装饰。在制作前段页面到时候我们单独建立css、js、plugins等目录来存储这些样式的文件。在Django中一样可以这样做，不过我们要把这些目录都统一的创建到static目录下。
1、在mydjango项目目录下，创建一个名字叫做static的文件夹
2、在static目录下创建提到img、css、js、plugins等目录
3、修改子目录mydjango目录下的setting.py文件，在文件里添加如下内容
settings.py
STATIC_URL = ‘/static/‘ STATICFILES_DIRS=( os.path.join(BASE_DIR,‘static‘), #注意括号后面的还有个逗号 )
4、在css目录下创建一个从commons.css
在js目录下引入jQuery
在plugins目录下引入bootstrap
commons.css
.first-line{
color: red;
}
.second-line{
color: green;
}
.backcolor{
background-color: #8a6d3b;
}
在写入一定的样式后，编写测试用的index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引用bootstrap提供的css样式-->
<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.5-dist/css/bootstrap.min.css">
<!--引用自己的编写的commons.css样式-->
<link rel="stylesheet" href="/static/css/commons.css">
</head>
<body>
<div class="first-line h1" id="1">
first line
</div>
<div class="second-line h1" id="2">
second line
</div>
<button type="button" class="btn btn-primary" id="bt">Primary</button>
<!--引用jQuery-->
<script type="application/javascript" src="/static/js/jquery-2.2.1.min.js"></script>
<!--引用bootstrap提供的js-->
<script type="application/javascript" src="/static/plugins/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script>
// 定义一个事件，当点击按钮的时候给第二行添加背景色
$(function(){
$(‘#bt‘).click(function(){
$(‘#2‘).addClass(‘backcolor‘)
});
});
</script>
</body>
</html>这里要注意，在引入jQuery和bootstrap的时候 script type=type="application/javascript" 千万写成其他的格式，否则影响js的使用
5、启动django的web程序查看页面
点击蓝色的按钮之后触发事件
到此我们就实现了在django中通过引入外部的css和js美化页面的目的。
本文出自 “霹雳豆包” 博客，谢绝转载！
原文：http://830909.blog.51cto.com/8311014/1748958