django-bootstrap集成

时间 2019-11-07

标签 django bootstrap 集成栏目 Python 繁體版

原文原文链接

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

easy_install pip
html
pip install django-bootstrap-staticpython

复制代码django

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

INSTALLED_APPS = (
session
'django.contrib.auth',
ui
'django.contrib.contenttypes',
spa
'django.contrib.sessions',
htm
'django.contrib.sites',
ip
'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>
</div>
</div>
</div>

复制代码