django管理界面使用与bootstrap模板使用

一、bootstrap模板使用

1.去bootstrap官网找一个合适的模板，下载下来，右键另存为即可

bootstrap官网---->bootstrap中文文档3-------->起步-------->找到合适模板------>右键另存为

2.在项目目录下新建statics目录，在statics目录下新建4个子目录，分别是：css、js、image、plugin，将下载下来的js放到js目录，css放到css目录，图片放到image目录

3.settings.py也要指定静态文件目录

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'statics'),
)

3.将下载下来的网页放在templates目录下，并改名为base.html，它基本上全是css和js，它将被用作公共模板，

再创建一个index.html，index放的是下载下来的网页去掉css和js的部分，主要是公共内容和框架，它将被用做app网页的模板

然后在templates目录下新建一个app的目录：app，app目录用来存放app自己的页面。

base.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
{#    meta全部保留，IE浏览器相关的可要可不要，图标与css也要全部保留#}
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
    <title>王腾的个人站点</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
     {% block header-resources %} {% endblock %}
{#    这里留一个block块，可以方便其他网页继承时进行扩展 来添加自定义样式#}
  </head>

  <body>
    {% block body %} {% endblock %}
{#     这里留一个block  body块，可以方便其他网页继承时进行扩展 在body里添加自定义的内容#}
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/holder.min.js"></script>
{#    这些js全部保留，js的路径static是settings.py中STATIC_URL = '/static/'对应的STATIC_URL，而不是实际的目录名#}
    <script>
{#        这里是自定义js，点击相应按钮时，按钮变颜色#}
        $(document).ready(function () {
            var current_url = "{{ request.path }}";
            $('.nav-sidebar a[href="{{ request.path }}"]').parent().addClass('active');
        })
    </script>
</body></html>

View Code