Django-bootstrap Integrated __django

Bootstrap as a popular front-end framework, has been adopted by many projects, if users accept not to use IE, using bootstrap will greatly reduce our development costs. Here's a simple introduction to Django and Bootstrap integration.


1. Install Django-bootstrap-static

Django-bootstrap-static is installed with PIP, installation steps are as follows

Easy_install pip
pip install django-bootstrap-static

After the installation is successful, a bootstrap directory is added to the Python/site-packages directory
Introduced in 2.settings.py

Installed_apps = (
    ' Django.contrib.auth ',
    ' django.contrib.contenttypes ', '
    django.contrib.sessions ',
    ' django.contrib.sites ',
    ' django.contrib.messages ',
    ' django.contrib.staticfiles ',
    # Uncomment The next line to enable the admin:
    ' django.contrib.admin ',
    # uncomment the next line to enable admin documentation :
    # ' Django.contrib.admindocs ',
    ' order ',
    ' Bootstrap ',
)

Notice to join the bootstrap at the end.
3. Introduction of Base.html
Note that you can find a base.html in the site-packages\bootstrap\templates\bootstrap\ directory, replace it with the base.html that the teacher wrote, and note that the {{Static_url}} in the file is changed to/ static/, as follows

    <link href= "/static/bootstrap/css/bootstrap.css" rel= "stylesheet" >
    <link href= "/static/bootstrap/" Css/bootstrap-responsive.css "rel=" stylesheet ">

4. Use of Bootstrap
Once you have completed the above steps, you can use bootstrap, such as its NAV function:

<div class= "NavBar navbar-inverse navbar-fixed-top" > <div class= "Navbar-inner" > <div class= "Con"
               Tainer-fluid "> <a class=" btn btn-navbar "data-toggle=" collapse "data-target=". Nav-collapse ">
               <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> </a> <a class= "brand" href= "#" >eshop</a&
            Gt <div class= "Nav-collapse collapse" > <p class= "Navbar-text pull-right" > Welcome, <a href= "#" class= "Navbar-link" >{{user.username}}////{{user.email}}</a> <a href= "/A
                dmin/password_change/"> Modify password </a>/<a href="/admin/logout/"> Logoff </a> </p> <ul class= "nav" > <li class= "active" ><a href= "#" >Home< /a></li> <li><a href= "#about" >About</a></li> &LT;LI&GT;&L T;a href= "#contact" >Contact</a></li> </ul> </div><!--/.nav-colla PSE--> </div> </div> </div>