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>
    . 

  • 相关阅读:
    POJ 1228 Grandpa's Estate | 凸包
    POJ 2187 Beauty Contest | 旋转卡壳
    POJ 3348 Cows | 凸包模板题
    POJ 1375 Intervals | 解析几何
    POJ 2074 | 线段相交
    POJ 1039 Pipe | 线段相交
    POJ 3304 Segments | 线段相交
    POJ 2318 TOYS | 二分+判断点在多边形内
    jpg、jpeg、png... 的区别
    xhr.readyState就绪状态
  • 原文地址:https://www.cnblogs.com/zhenfei/p/6422359.html
Copyright © 2011-2022 走看看