django-bootstrap集成

2014/04/22 16:46
阅读数 3.9K

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>

复制代码


展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部