Django 中引入bootstrap的方法

第一步，下载bootstrap

http://v3.bootcss.com/getting-started/#download

下载第一个即可
下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：
复制

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

上面展示的就是 Bootstrap 的基本文件结构：预编译文件可以直接使用到任何 web 项目中。我们提供了编译好的 CSS 和 JS (bootstrap.) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。

第二步 配置settings.py文件

"""Django settings for my_blog project.Generated by 'django-admin startproject' using Django 1.9.4.For more information on this file, seehttps://docs.djangoproject.com/en/1.9/topics/settings/For the full list of settings and their values, seehttps://docs.djangoproject.com/en/1.9/ref/settings/"""import os# Build paths inside the project like this: os.path.join(BASE_DIR, ...)BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))# Quick-start development settings - unsuitable for production# See https://docs.djangoproject.com/en/1.9/howto/deployment/checklist/# SECURITY WARNING: keep the secret key used in production secret!SECRET_KEY = '2bcemd%mx@(uhf)8b33h1z2=9^ftu$)k_l^jhdw@7sdx5gay0p'# SECURITY WARNING: don't run with debug turned on in production!DEBUG = TrueALLOWED_HOSTS = []# Application definitionINSTALLED_APPS = [   # 'bootstrap_admin',unsurport the latest version of django    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',    'article',]MIDDLEWARE_CLASSES = [    'django.middleware.security.SecurityMiddleware',    'django.contrib.sessions.middleware.SessionMiddleware',    'django.middleware.common.CommonMiddleware',    'django.middleware.csrf.CsrfViewMiddleware',    'django.contrib.auth.middleware.AuthenticationMiddleware',    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',    'django.contrib.messages.middleware.MessageMiddleware',    'django.middleware.clickjacking.XFrameOptionsMiddleware',]ROOT_URLCONF = 'my_blog.urls'TEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        'DIRS': [os.path.join(BASE_DIR,'templates')],        'APP_DIRS': True,        'OPTIONS': {            'context_processors': [                'django.template.context_processors.debug',                'django.template.context_processors.request',                'django.contrib.auth.context_processors.auth',                'django.contrib.messages.context_processors.messages',            ],        },    },]WSGI_APPLICATION = 'my_blog.wsgi.application'# Database# https://docs.djangoproject.com/en/1.9/ref/settings/#databasesDATABASES = {    'default': {        'ENGINE': 'django.db.backends.sqlite3',        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),    }}# Password validation# https://docs.djangoproject.com/en/1.9/ref/settings/#auth-password-validatorsAUTH_PASSWORD_VALIDATORS = [    {        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',    },    {        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',    },    {        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',    },    {        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',    },]# Internationalization# https://docs.djangoproject.com/en/1.9/topics/i18n/LANGUAGE_CODE = 'en-us'TIME_ZONE = 'UTC'USE_I18N = TrueUSE_L10N = TrueUSE_TZ = True# Static files (CSS, JavaScript, Images)# https://docs.djangoproject.com/en/1.9/howto/static-files/STATIC_URL = '/static/' #此处必须，为新添加STATIC_ROOT = os.path.join(BASE_DIR, 'collectstatic')#此处必须，为新添加STATICFILES_DIRS = (    os.path.join(BASE_DIR, "static"),#此处必须，为新添加)

注意最后三个配置，分别配置bootstrap的路径及html里的标签

第三部 html的编写

{% load staticfiles %}<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->    <meta name="description" content="">    <meta name="author" content="">    <link rel="icon" href="../../favicon.ico">    <title>Blog Template for Bootstrap</title>    <!-- Bootstrap core CSS -->    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">    <!-- Custom styles for this template -->    <link href="{% static 'css/blog.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://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>    <div class="blog-masthead">      <div class="container">        <nav class="blog-nav">          <a class="blog-nav-item active" href="#">Home</a>          <a class="blog-nav-item" href="#">New features</a>          <a class="blog-nav-item" href="#">Press</a>          <a class="blog-nav-item" href="#">New hires</a>          <a class="blog-nav-item" href="#">About</a>        </nav>      </div>    </div>    <div class="container">      <div class="blog-header">        <h1 class="blog-title">The Bootstrap Blog</h1>        <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>      </div>      <div class="row">        <div class="col-sm-8 blog-main">          <div class="blog-post">            <h2 class="blog-post-title">Sample blog post</h2>            <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>            <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>            <hr>            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>            <blockquote>              <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>            </blockquote>            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>            <h2>Heading</h2>            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>            <h3>Sub-heading</h3>            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>            <pre><code>Example code block</code></pre>            <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>            <h3>Sub-heading</h3>            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>            <ul>              <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>              <li>Donec id elit non mi porta gravida at eget metus.</li>              <li>Nulla vitae elit libero, a pharetra augue.</li>            </ul>            <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>            <ol>              <li>Vestibulum id ligula porta felis euismod semper.</li>              <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>              <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>            </ol>            <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>          </div><!-- /.blog-post -->          <div class="blog-post">            <h2 class="blog-post-title">Another blog post</h2>            <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>            <blockquote>              <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>            </blockquote>            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>          </div><!-- /.blog-post -->          <div class="blog-post">            <h2 class="blog-post-title">New feature</h2>            <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>            <ul>              <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>              <li>Donec id elit non mi porta gravida at eget metus.</li>              <li>Nulla vitae elit libero, a pharetra augue.</li>            </ul>            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>            <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>          </div><!-- /.blog-post -->          <nav>            <ul class="pager">              <li><a href="#">Previous</a></li>              <li><a href="#">Next</a></li>            </ul>          </nav>        </div><!-- /.blog-main -->        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">          <div class="sidebar-module sidebar-module-inset">            <h4>About</h4>            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>          </div>          <div class="sidebar-module">            <h4>Archives</h4>            <ol class="list-unstyled">              <li><a href="#">March 2014</a></li>              <li><a href="#">February 2014</a></li>              <li><a href="#">January 2014</a></li>              <li><a href="#">December 2013</a></li>              <li><a href="#">November 2013</a></li>              <li><a href="#">October 2013</a></li>              <li><a href="#">September 2013</a></li>              <li><a href="#">August 2013</a></li>              <li><a href="#">July 2013</a></li>              <li><a href="#">June 2013</a></li>              <li><a href="#">May 2013</a></li>              <li><a href="#">April 2013</a></li>            </ol>          </div>          <div class="sidebar-module">            <h4>Elsewhere</h4>            <ol class="list-unstyled">              <li><a href="#">GitHub</a></li>              <li><a href="#">Twitter</a></li>              <li><a href="#">Facebook</a></li>            </ol>          </div>        </div><!-- /.blog-sidebar -->      </div><!-- /.row -->    </div><!-- /.container -->    <footer class="blog-footer">      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>      <p>        <a href="#">Back to top</a>      </p>    </footer>    <!-- Bootstrap core JavaScript    ================================================== -->    <!-- Placed at the end of the document so the pages load faster -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    <script src="{% static '/js/bootstrap.min.js' %}"></script>    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>  </body></html>

文本开头加上{% load staticfiles %}标签，对于样式的引用采用<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">种格式