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/

  • 相关阅读:
    LeetCode(287)Find the Duplicate Number
    LeetCode(290) Word Pattern
    LeetCode(205)Isomorphic Strings
    LeetCode(201) Bitwise AND of Numbers Range
    LeetCode(200) Number of Islands
    LeetCode(220) Contains Duplicate III
    LeetCode(219) Contains Duplicate II
    命令行执行Qt程序
    LeetCode(228) Summary Ranges
    redis 的安装和使用记录
  • 原文地址:https://www.cnblogs.com/sundahua/p/7072183.html
Copyright © 2011-2022 走看看