django-bootstrap集成

2019独角兽企业重金招聘Python工程师标准>>>

1.安装django-bootstrap-static
django-bootstrap-static采用pip安装，安装步骤如下

1. easy_install pip
   

2. pip install django-bootstrap-static

复制代码

安装成功后会在python/site-packages目录下增加一个bootstrap目录
2.settings.py中引入

1. INSTALLED_APPS = (
   

2.     'django.contrib.auth',
   

3.     'django.contrib.contenttypes',
   

4.     'django.contrib.sessions',
   

5.     'django.contrib.sites',
   

6.     'django.contrib.messages',
   

7.     'django.contrib.staticfiles',
   

8.     # Uncomment the next line to enable the admin:
   

9.     'django.contrib.admin',
   

10.     # Uncomment the next line to enable admin documentation:
    

11.     # 'django.contrib.admindocs',
    

12.     'order',
    

13.     'bootstrap',
    

14. )

复制代码

注意在最后面加入了bootstrap
3.引入base.html
注意在site-packages\bootstrap\templates\bootstrap\目录下可以找到一个base.html，把它替换老师写的base.html，注意将该文件中的{{ STATIC_URL }}改成/static/，如下

1.     <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
   

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

复制代码

4.使用bootstrap
完成上面的步骤后，就可以随意使用bootstrap了，比如使用它的nav功能：

1. <div class="navbar navbar-inverse navbar-fixed-top">
   

2.     <div class="navbar-inner">
   

3.         <div class="container-fluid">
   

4.            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
   

5.                <span class="icon-bar"></span>
   

6.                <span class="icon-bar"></span>
   

7.                <span class="icon-bar"></span>
   

8.             </a>
   

9.             <a class="brand" href="#">EShop</a>
   

10.             <div class="nav-collapse collapse">
    

11.                 <p class="navbar-text pull-right">
    

12.                     欢迎，<a href="#" class="navbar-link">{{ user.username }}{{ user.email }}</a>
    

13.                     <a href="/admin/password_change/">修改密码</a> /
    

14.                     <a href="/admin/logout/">注销</a>
    

15.                 </p>
    

16.                 <ul class="nav">
    

17.                     <li class="active"><a href="#">Home</a></li>
    

18.                     <li><a href="#about">About</a></li>
    

19.                     <li><a href="#contact">Contact</a></li>
    

20.                 </ul>
    

21.             </div><!--/.nav-collapse -->
    

22.         </div>
    

23.     </div>
    

24. </div>

复制代码

转载于:https://my.oschina.net/zhangrf/blog/225167