zoukankan      html  css  js  c++  java
  • django 结合 bootstrap 使用

    git clone https://github.com/dyve/django-bootstrap3.git

    要运行demo,需要在demo 中为其增加一个符号链接 bootstrap3 到上层目录的同名文件夹

    sudo ln -s ../bootstrap3 ./bootstrap3

    ==================================================

    直接使用bootstrap:

    下载: http://getbootstrap.com/getting-started/#download

    在 Django 项目的app目录下新建一个static文件夹,再在static里面新建一个bootstrap文件夹,将下载的三个文件夹放进去. 并修改 settings.py

    关于static文件的使用,详细 settings.py 的 STATIC_URL 附近的注释网址,例如: https://docs.djangoproject.com/en/1.8/howto/static-files/

    STATIC_URL = '/static/'
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, 'static'),
    )

    将static目录放在 STATICFILES_DIRS 中,以便 load 到我们刚下载的bootstrap,bootstrap依赖于jQuery库,所以一定要添加,我们这里是直接引用的,如果有下载版本只需放在static里再引用就行。

    使用时,在模板文件开头的 {% load staticfiles %}就是加载static目录,找到static目录,后续就可以使用相关bootstrap属性

    <!DOCTYPE html>
    {% load staticfiles %}
    <html>
    <head lang="en">
        <meta charset="UTF-8">
         <!-- 引入jQuery -->
        <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
         <!-- 引入 Bootstrap -->
         <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
         <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet" type="text/css">
          <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
         <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script>         
         <!--[if lt IE 9]>
          <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>
            <![endif]-->
        <title>数据展示平台</title>        
    </head>
    <body>
    <!-- bootstrap 特性容器 -->
     <div class="container">
         <h1>Hello, world! </h1>
     </div>
    </body>
    </html>
    . 

  • 相关阅读:
    Linux网卡驱动程序对ethtool的支持和实现
    Linux下samba编译与安装(Ubuntu和嵌入式linux)
    [DM8168]Linux下SPI驱动测试
    Sublime Text 2 中文乱码
    Linux线程优先级
    Linux再谈互斥锁与条件变量
    Makefile编写记录
    Linux大小端模式转换函数
    电脑显卡4种接口类型:VGA、DVI、HDMI、DP
    python __enter__ 与 __exit__的作用,以及与 with 语句的关系
  • 原文地址:https://www.cnblogs.com/zhenfei/p/6422359.html
Copyright © 2011-2022 走看看