django-bootstrap集成

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>

複製代碼