django 结合bootstrap自有 dyve 写的工具django-bootstrap-toolkit

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

  1. apt-get install python-setuptools  

  2. easy_install virtualenv  

  3. virtualenv --no-site-packages django-monkey

  4. source django-monkey/bin/activate  

  5. cd django-monkey/  

  6. easy_install Django  

  7. django-admin.py startproject django_mysite  

  8. python manage.py runserver 0.0.0.0:80  

在安装django-bootstrap-toolkit

Installation

  1. Install using pip:

    pip install django-bootstrap-toolkit

  2. 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跑出来的感觉更直观，效果图：

django 结合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的文档