Django+bootstrap

2017-06-25

Bootstrap 简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

Bootstrap 环境安装

从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本
Download Bootstrap：下载 Bootstrap,点击该按钮。

解压放到Django 框架下如果我们的django项目叫做mysite,项目里面有个应用叫做blog.
那么我们需要在mysite下面创建一个static目录,然后在static目录下面创建一个bootstrap目录.将解压后的bootstrap/dist里面的内容放到/static/bootstrap/里面.
完整的路径如下：

D:\mysite
├─blog
│  ├─migrations
│  └─static
│      └─img
├─mysite
├─static
│  ├─bootstrap
│  │  ├─css
│  │  ├─fonts
│  │  └─js
│  └─img
└─templates
    └─blog
        └─img

修改Django配置文件

修改settings.py文件
确认是否有：

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(file)))
INSTALLED_APPS元组里面是否有‘django.contrib.staticfiles’,
STATIC_URL = ‘/static/’
STATICFILES_DIRS = os.path.join(BASE_DIR, ‘static’),

在template中调用bootstrap

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

{ % load staticfiles % }
然后在head或者body里面加入以下调用：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Theme Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="theme.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

测试

复制HTML文件源码存为test.html，放到/tmplates 目录下
http://v3.bootcss.com/examples/theme/
在 views.py 文件里新增：
from django.shortcuts import render
def test(request):
return render(request,’test.html’)

在urls.py文件里新增：

from blog.views import test
urlpatterns = [
    url(r'^test/$', test),
]