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, see
https://docs.djangoproject.com/en/1.9/topics/settings/

For the full list of settings and their values, see
https://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 = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_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/#databases

DATABASES = {
    '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-validators

AUTH_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 = True

USE_L10N = True

USE_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 %}

<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">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Blog Template for Bootstraptitle>

    
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

    
    <link href="{% static 'css/blog.css' %}" rel="stylesheet">

    
    
    <script src="../../assets/js/ie-emulation-modes-warning.js">script>

    
    
  head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Homea>
          <a class="blog-nav-item" href="#">New featuresa>
          <a class="blog-nav-item" href="#">Pressa>
          <a class="blog-nav-item" href="#">New hiresa>
          <a class="blog-nav-item" href="#">Abouta>
        nav>
      div>
    div>

    <div class="container">

      <div class="blog-header">
        <h1 class="blog-title">The Bootstrap Blogh1>
        <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 posth2>
            <p class="blog-post-meta">January 1, 2014 by <a href="#">Marka>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 montesa>, 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 mollisstrong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.p>
            blockquote>
            <p>Etiam porta <em>sem malesuada magnaem> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.p>
            <h2>Headingh2>
            <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-headingh3>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.p>
            <pre><code>Example code blockcode>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-headingh3>
            <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>

          <div class="blog-post">
            <h2 class="blog-post-title">Another blog posth2>
            <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacoba>p>

            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montesa>, 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 mollisstrong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.p>
            blockquote>
            <p>Etiam porta <em>sem malesuada magnaem> 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>

          <div class="blog-post">
            <h2 class="blog-post-title">New featureh2>
            <p class="blog-post-meta">December 14, 2013 by <a href="#">Chrisa>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 magnaem> 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>

          <nav>
            <ul class="pager">
              <li><a href="#">Previousa>li>
              <li><a href="#">Nexta>li>
            ul>
          nav>

        div>

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>Abouth4>
            <p>Etiam porta <em>sem malesuada magnaem> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.p>
          div>
          <div class="sidebar-module">
            <h4>Archivesh4>
            <ol class="list-unstyled">
              <li><a href="#">March 2014a>li>
              <li><a href="#">February 2014a>li>
              <li><a href="#">January 2014a>li>
              <li><a href="#">December 2013a>li>
              <li><a href="#">November 2013a>li>
              <li><a href="#">October 2013a>li>
              <li><a href="#">September 2013a>li>
              <li><a href="#">August 2013a>li>
              <li><a href="#">July 2013a>li>
              <li><a href="#">June 2013a>li>
              <li><a href="#">May 2013a>li>
              <li><a href="#">April 2013a>li>
            ol>
          div>
          <div class="sidebar-module">
            <h4>Elsewhereh4>
            <ol class="list-unstyled">
              <li><a href="#">GitHuba>li>
              <li><a href="#">Twittera>li>
              <li><a href="#">Facebooka>li>
            ol>
          div>
        div>

      div>

    div>

    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrapa> by <a href="https://twitter.com/mdo">@mdoa>.p>
      <p>
        <a href="#">Back to topa>
      p>
    footer>


    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">script>
    <script src="{% static '/js/bootstrap.min.js' %}">script>
    
    <script src="../../assets/js/ie10-viewport-bug-workaround.js">script>
  body>
html>

文本开头加上{% load staticfiles %}标签，对于样式的引用采用种格式