django-bootstrap集成

来源：互联网发布：ssh 连接指定端口编辑：程序博客网时间：2024/05/28 17:06

bootstrap作为流行的前端框架，已经被很多项目采用，如果用户接受不使用IE，采用bootstrap会大大节约我们的开发成本。下面对django和bootstrap集成做简单的介绍。

1.安装django-bootstrap-static

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

easy_install pippip install django-bootstrap-static

安装成功后会在python/site-packages目录下增加一个bootstrap目录
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',)

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

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

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

<div class="navbar navbar-inverse navbar-fixed-top">    <div class="navbar-inner">        <div class="container-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>            <div class="nav-collapse collapse">                <p class="navbar-text pull-right">                    欢迎，<a href="#" class="navbar-link">{{ user.username }}////{{ user.email }}</a>                    <a href="/admin/password_change/">修改密码</a> /                    <a href="/admin/logout/">注销</a>                </p>                <ul class="nav">                    <li class="active"><a href="#">Home</a></li>                    <li><a href="#about">About</a></li>                    <li><a href="#contact">Contact</a></li>                </ul>            </div><!--/.nav-collapse -->        </div>    </div></div>

0 0