zoukankan      html  css  js  c++  java
  • 整合django和bootstrap框架

    环境:

    python版本:2.7.8

    django版本:1.7.1

    bootstrap版本:3.3.0

    首先github上面有两个开源的项目用来整合django和bootstrap.

    https://github.com/dyve/django-bootstrap-toolkit 对应的是bootstrap 2.0版本

    https://github.com/dyve/django-bootstrap3 对应的是bootstrap 3.0版本

    但是使用这个插件的话,会增加额外的学习成本,所以我们选用原生的方式调用bootstrap.

    由于bootstrap就是一堆css和js以及字体文件,并且属于静态资源,所以我们只需要配置好django的访问路径,能够让template里面的代码访问到bootstrap相关的文件即可.

    第一步:

    下载bootstrap文件,http://v3.bootcss.com/getting-started/

    然后将本件解压以后,放到django框架的目录中.

    我的放置位置如下.

    如果我们的django项目叫做python_web,项目里面有个应用叫做blog.

    那么我们需要在python_web下面创建一个static目录,然后在static目录下面创建一个bootstrap目录.将解压后的bootstrap/dist里面的内容放到/static/bootstrap/里面.

    完整的路径如下:

    D:PYTHON_WEB
    ├─blog
    │  ├─migrations
    │  └─static
    │      └─img
    ├─python_web
    ├─static
    │  ├─bootstrap
    │  │  ├─css
    │  │  ├─fonts
    │  │  └─js
    │  └─img
    └─templates
        └─blog
            └─img

    第二步:调整django框架配置

    修改settings.py文件.

    确认是否已一下几行.

    BASE_DIR = os.path.dirname(os.path.dirname(__file__))

    INSTALLED_APPS元组里面是否有‘django.contrib.staticfiles’,

    STATIC_URL = ‘/static/’

    STATICFILES_DIRS = (

    os.path.join(BASE_DIR, “static”),

    )

    第三步:在template中调用bootstrap

    需要在django相关的模板文件中加入一下内容来实现对bootstrap的调用

    文件开始加入:

    {% load staticfiles %}
    然后在head或者body里面加入以下调用:
    <script src="//upcdn.b0.upaiyun.com/libs/jqueryui/jquery.ui-1.9.0.min.js"></script>
     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
     <!-- 引入 Bootstrap -->
     <link href="http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
     <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
     <style type="text/css" src="{% static 'bootstrap/css/bootstrap.css' %}"></style>

    这样就可以使用bootstrap的相关功能了.

    第四步:测试

    http://v3.bootcss.com/examples/theme/

    拷贝这个页面的源码到你的template里面,修改和替换第三步中提到的内容,看看是否达到效果了.尝试使用bootstrap的自动化布局,看看是否有效.

    http://www.bootcss.com/p/layoutit/

  • 相关阅读:
    第60天Shader法线贴图、切线空间
    第59天Shader基本光照模型、漫反射光照算法、光照计算、高光、灰度图实现
    第58天shader混合命令、颜色运算、顶点/片元着色、属性类型、语义、坐标空间、Unity内置矩阵、纹理采样、Cg函数
    第57天shader基本结构、渲染队列、裁剪、深度写入
    第55天XLua实现背包
    第54天XLua插件使用(续)
    第53天XLua插件使用
    第52天-lua语言基础语法
    第51天-AssetBundle(AB包)
    第50天-背包实例(三)
  • 原文地址:https://www.cnblogs.com/sundahua/p/7072183.html
Copyright © 2011-2022 走看看