Example tutorials for Django and bootstrap framework Consolidation

To facilitate rapid development projects, I intend to integrate the Django and bootstrap frameworks together, and here is the consolidation process.

Environment:
Python version: 2.7.8
Django Version: 1.7.1
Bootstrap version: 3.3.0

First GitHub has two open source projects to consolidate Django and bootstrap.
Https://github.com/dyve/django-bootstrap-toolkit corresponds to the bootstrap 2.0 version.
HTTPS://GITHUB.COM/DYVE/DJANGO-BOOTSTRAP3 corresponds to the bootstrap 3.0 version.

But using this plugin will add additional learning costs, so we choose the native way to invoke Bootstrap.

Because Bootstrap is a bunch of CSS and JS and font files, and belong to static resources, so we only need to configure the Django access path, can let template inside the code access to bootstrap related files.

The first step: Download the bootstrap file,

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

Then unpack the pieces and put them in the Django frame directory.
My placement is as follows.
If our Django project is called Python_web, there is an application in the project called a blog.
Then we need to create a static directory under Python_web, and then create a bootstrap directory under the static directory. Put the contents of the extracted bootstrap/dist inside the/static/bootstrap/.
The complete path is as follows:

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

Step two: Tweak the Django Framework configuration

Modify the settings.py file.
Confirm that you have a few lines.
Base_dir = Os.path.dirname (Os.path.dirname (__file__))

Is there a installed_apps in the tuple?
' Django.contrib.staticfiles ',

Static_url = '/static/'

Staticfiles_dirs = (
Os.path.join (Base_dir, "static"),
)

Step three: Call Bootstrap in template

You need to add content to the Django-related template file to implement the call to Bootstrap
File to start by adding:

{% load staticfiles%}

Then add the following call to the head or body:

<script src= "//upcdn.b0.upaiyun.com/libs/jqueryui/jquery.ui-1.9.0.min.js" ></script>
<script src= "Http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" ></script>
<!--introduced Bootstrap-->
<link href= "Http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css" rel= "stylesheet" >
<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>
<script type= "Text/javascript" src= "{% static ' bootstrap/js/bootstrap.js '%}" ></script>
<style type= "Text/css" src= "{% static ' bootstrap/css/bootstrap.css '%}" ></style>

This allows you to use bootstrap's related functionality.

Step Fourth: Test

http://v3.bootcss.com/examples/theme/

Copy the source code of this page into your template, modify and replace the content mentioned in the third step to see if the results are achieved.
Try using Bootstrap's automated layout to see if it works.

http://www.bootcss.com/p/layoutit/