Django Bootstrap toolkit - HelloWorld开发者社区

#背景#

bootstrap为前端的快速开发提供了一个很好的框架；Django则为后端的快速提供了全方位的支持，但是需要自己负责实现前端的视觉部分。一前一后两个框架正好可以结合构建一套完整的开发方案出来。

常规的界面，可以在Django的模板中，直接使用bootstrap的组件、类等工具编写即可。涉及到需要进行表单处理的部分，尤其是涉及到诸如后台等不需要特别美化，而又需要快速开发的部分，这种手工编码的方式显得就有点儿无法接受。

我们知道借助Django的form和widget功能，开发者几乎无需手工编写表单代码，Django会自动按照我们在form(及model)定义的表单结构，自动生成最终的html代码。对于开发者来说，这是一个极大的福音！我们希望在结合bootstrap和Django时不要失去这种优势。

而Django Bootstrap Toolkit正是结合两者优势的有力工具。

#简介#

Django Bootstrap ToolKit(DBT) 已经发布到pypi，其安装及简单使用方法可见官网。本文对此工具提供的功能做一简单介绍。

##标签(tag)##

使用bootstrap需要引入其样式表和/或其js库。DBT提供了一组标签方便开发者完成此项工作。当然此工具是从bootstrap的源码库中直接引入，如果想从其他地方引入，可以不使用此组标签。

bootstrap_stylesheet_url 输出样式表的url。bootstrap版本库中的样式表地址。
bootstrap_stylesheet_tag 输出引入样式表的代码。<link rel="stylesheet" href="...">
bootstrap_javascript_url 输出js的url。bootstrap版本库中的js地址。
bootstrap_javascript_tag 输出引入js的代码。 <script src="..."></script>
active_url 如果当前url与给定url相同则输出output参数的值(默认active)。常用于设置当前菜单高亮等场景。调用示例：{% active_url request,'/home'

##filter##

借助DBT提供的非常有限的几个过滤器(filter)即可实现前面提到的快速开发的需求。

渲染整个表单： {{ form|as_bootstrap}} 或渲染单个字段：``{{ form.field|as_bootstrap}}`

pagination 生成bootstrap样式的分页。调用示例：

{% if is_paginated %}
    {{ page_obj|pagination }}
{% endif %}

DBT提供了4个widget，不但提供了对bootstrap特有输入样式(如prepend)的支持，还引入了一个新的datepicker插件方便日期的输入。

BootstrapTextInput 可以增加前缀，后缀的输入控件。调用示例：

prepended = forms.CharField(
    max_length=100,
    help_text=u'I am prepended by a P',
    widget=BootstrapTextInput(prepend='P'),
)

widget