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

django 结合 bootstrap 使用的更多相关文章

  1. 整合django和bootstrap框架

    环境: python版本:2.7.8 django版本:1.7.1 bootstrap版本:3.3.0 首先github上面有两个开源的项目用来整合django和bootstrap. https:// ...

  2. Django 中bootstrap的引用

    bootstrap的优越性 如果你有基本的HTML+CSS,bootstrap其实就是在标签中加入具体的class来实现样式.和原生态的HTML+CSS需要先在head标签的style写样式或者引入外 ...

  3. Django配置Bootstrap, js

    1.首先在APP目录下创建一个static文件夹 如图: # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'dj ...

  4. Python - Django - 使用 Bootstrap 样式修改注册页

    reg2 函数: from django.shortcuts import render, HttpResponse from app01 import models def reg2(request ...

  5. django:bootstrap table加载django返回的数据

    bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...

  6. Django之Bootstrap使用

    首先将bootstrap文件粘贴到static文件夹中,引入分为两部分,一是css文件引入,二是js文件引入. 1.css引入: <!DOCTYPE html> <html lang ...

  7. django使用bootstrap快速美化 admin后台

    使用django-admin-bootstrappe快速美化后台 两步: 1.pip install django-admin-bootstrapped  安装应用 2.在setting.py里面添加 ...

  8. 【django】Bootstrap 安装和使用

    官网 下载:推荐下载源码包 安装Bower:使用Bower安装并管理 Bootstrap 的Less.CSS.JavaScript和字体文件(通过npm安装bower) npm install -g ...

  9. django使用bootstrap前端框架

    一.下载bootstrap相关文件,放在项目目录中.在blog 应用中新建static目录,bootstrap文件放在此目录下. bootstrap下载网址:http://v3.bootcss.com ...

随机推荐

  1. 《DSP using MATLAB》Problem 8.28

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  2. Spring-白话事物

    什么是事物,把一组逻辑放在一起作为一个单元来提交执行,这就是事物,这不是定义,大概是这么个意思 如果你留心的话,你会看到到处都有事物,到处都会提到ACID四个特性(原子性,一致性,隔离性,持久性) R ...

  3. Django的日常-路由层

    目录 Django的日常-2 路由层 有名分组和无名分组 反向解析 路由的分发 Django的日常-2 路由层 我们之前已经接触过路由层,只是我们可能不知道他叫这个名字,实际上在Django里面路由层 ...

  4. elasticsearch 中文API 删除(四)

    删除API 删除api允许你通过id,从特定的索引中删除类型化的JSON文档.如下例: DeleteResponse response = client.prepareDelete("twi ...

  5. mapduce简介

    原文引自:http://www.cnblogs.com/shishanyuan/p/4639519.html 1.环境说明 部署节点操作系统为CentOS,防火墙和SElinux禁用,创建了一个shi ...

  6. Exit- Linux必学的60个命令

    1.作用 exit命令的作用是退出系统,它的使用权限是所有用户. 2.格式 exit 3.参数 exit命令没有参数,运行后退出系统进入登录界面.

  7. x86架构:x86架构

    ylbtech-x86架构:x86架构 X86架构(The X86 architecture)是微处理器执行的计算机语言指令集,指一个intel通用计算机系列的标准编号缩写,也标识一套通用的计算机指令 ...

  8. anaconda安装使用

    Conda是一个开源的包.环境管理器,可以用于在同一个机器上安装不同版本的软件包及其依赖,并能够在不同的环境之间切换 下载:https://mirrors.tuna.tsinghua.edu.cn/a ...

  9. 文件内容操作命令 cat、more、less、head、tail、wc、grep 命令详情

      文件内容操作命令 cat.more.less.head.tail.wc.grep 命令详情 1)        cat命令   用途:显示出文件的全部内容   格式:cat 目标文件   例:   ...

  10. Django项目:CRM(客户关系管理系统)--54--45PerfectCRM实现账号快速重置密码

    # gbacc_ajax_urls.py # ————————42PerfectCRM实现AJAX全局账号注册———————— from django.conf.urls import url fro ...