django 结合bootstrap 的初探

django 结合bootstrap自有 dyve 写的工具django-bootstrap-toolkit
先安装django环境，这里我用了一个才发现的好东西virtualenv，python的虚拟开发环境，可以避免包冲突，独立开发， 用了2天 发现很好用的说过程全部是在ubuntu12.04上进行，django是最新版本，旧版本应该也没问题，没试过apt-get install python-setuptools

easy_install virtualenv

virtualenv --no-site-packages django-monkey

source django-monkey/bin/activate

cd django-monkey/

easy_install Django

django-admin.py startproject django_mysite

python manage.py runserver 0.0.0.0:80

在安装django-bootstrap-toolkit

Installation

Install using pip:

pip install django-bootstrap-toolkit

Add to INSTALLED_APPS:

'bootstrap_toolkit',

把dyve大牛的demo_project下面的demo_app添加到合适的位置， 一般是跟manage.py同一级目录到这一步，本以为可以欣赏下bootstrap给人带来的愉悦爽感，结果发现module无法导入，继续哼哼唧唧调整，页面可以显示了 结果没css带来的效果，整个页面几乎是黑白世界，彻底崩溃。因为实在不是很懂网页的前端，看了bootstrap的官网源代码，看了dyve大牛的代码，总算是弄清为什么没法跑起来了详细步骤简略点说吧，其中主要原因就是bootstrap貌似没有起作用，调用的css没法用起来
我翻阅了好多bootstrap官网的例子，把上面的bootstrap关键的css和js都下到了static/bootstrap下
具体整个demo_project代码我post上github，地址是：https://github.com/stefanmonkey/stefanbo/tree/master/development/django_development/django_mysite
因为是自己的一个仓库里面的分支 ，简单上传了，有兴趣的朋友可以参考下我的环境是可以跑出来的，这个demo还是很有价值的，可以参考着做一些组件，相比bootstrap的例子，django跑出来的感觉更直观，效果图：




关键的地方一个是setting.py的设置，

MEDIA_ROOT = os.path.join(BASE_DIR, "media")
MEDIA_URL = '/media/'
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
#     'django.template.loaders.eggs.Loader',
)
TEMPLATE_DIRS = [
os.path.join(BASE_DIR, 'templates')
]
BOOTSTRAP_BASE_URL      = os.path.join(STATIC_ROOT, 'bootstrap')
BOOTSTRAP_CSS_BASE_URL  = os.path.join(BOOTSTRAP_BASE_URL, 'css')
#BOOTSTRAP_CSS_URL       = BOOTSTRAP_CSS_BASE_URL + 'bootstrap.css'
BOOTSTRAP_JS_BASE_URL   = os.path.join(BOOTSTRAP_BASE_URL, 'js')
# Enable for single bootstrap.js file
#BOOTSTRAP_JS_URL        = BOOTSTRAP_JS_BASE_URL + 'bootstrap.js'
STATICFILES_DIRS = (
('b_css', BOOTSTRAP_CSS_BASE_URL),
('b_js',  BOOTSTRAP_JS_BASE_URL),
STATIC_URL,
)

再就是base.html需要导入的bootstrap脚本和href的地址调整，挑出几个例子

<link href="` STATIC_URL `b_css/bootstrap.bak.css" rel="stylesheet">
<li><a href="{% url 'demo_app:demo_pagination' %}">Pagination</a></li>
<script src="` STATIC_URL `b_js/jquery.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-transition.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-alert.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-modal.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-dropdown.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-scrollspy.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-tab.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-tooltip.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-popover.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-button.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-collapse.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-carousel.js"></script>
<script src="` STATIC_URL `b_js/bootstrap-typeahead.js"></script>
剩下的细节可以参考django的文档