deform_bootstrap 0.2.9

我刚刚下载了这个并想使用它

在您的Paste Deploy配置文件（例如development.ini）中，将deform_bootstrap 添加到pyramid_includes 列表中，或者如果不存在pyramid.includes 设置，则添加此行

[app:main]
...
pyramid.includes = deform_bootstrap

这将把模板放在 deform_bootstrap/templates 中，并将其放入 deform搜索路径。

我想在使用之前尝试一下

如果您想快速尝试 deform_bootstrap 并查看其实际效果，可以运行以下命令，假设您已在 deform_bootstrap 目录中设置了一个 virtualenv。

$ git clone https://github.com/Pylons/deformdemo.git
$ cd deformdemo
$ ../bin/python setup.py develop
$ cd ..
$ bin/pserve demo.ini

您现在应该能够访问演示站点，地址为 http://0.0.0.0:8521

在表单中使用选项卡

要制作选项卡表单，请使用映射。每个映射将作为一个新的选项卡出现，以映射的标题作为选项卡的名称。如果您为某些信息指定了没有选项卡，它将默认为“基本”选项卡。

使用以下 Client 架构的表单将显示两个选项卡“个人信息”和“汽车配件”

import colander

class Person(colander.Schema):
    name = colander.SchemaNode(
        colander.String(),
        title='Name',
        )
    surname = colander.SchemaNode(
        colander.String(),
        title='Surname',
        )

class Car(colander.Schema):
    color = colander.SchemaNode(
        colander.String(),
        title='Color',
        )
    horsepower = colander.SchemaNode(
        colander.Integer(),
        title='Horsepower',
        )

class Client(colander.Schema):
    person = Person(title='Person data')
    car = Car(title='Car stuffs')

jQueryUI

Deform 依赖于 jQueryUI 来使用这些小部件

• AutocompleteInputWidget

• DateInputWidget

• DateTimeInputWidget

deform_bootstrap 内置了替换这些小部件的控件，并且与 Bootstrap 兼容。如果您不使用这些控件，可以跳过本节剩余部分，只需从您的 CSS 和 JS 导入中删除 jQueryUI。否则，您需要将 bootstrap-typeahead.js 和/或 bootstrap-datepicker.js 添加到您的 JS 包中。

然后您可以使用 deform_bootstrap 的 TypeaheadInputWidget 作为 deform 的 AutocompleteInputWidget 的替代品。

遗憾的是，DateInputWidget 和 DateTimeInputWidget 的情况要复杂一些，因为 bootstrap 尚未提供用于该用途的原生小部件。因此，您将需要使用 deform_bootstrap 提供的 deform_bootstrap.css，或者使用 LESS <https://lesscss.org.cn/> 构建 bootstrap.css。安装 lessc 后，可以这样做：

$ cd deform_bootstrap/static
$ lessc deform_bootstrap.less

然后您将找到您自定义的 deform_bootstrap.css，这将立即为 DateInputWidgets 带来全新的外观。对于 DateTimeInputWidgets，您需要替换现有的导入。这就像在您的代码中将 from deform.widget import DateTimeInputWidget 替换为 from deform_bootstrap.widget import DateTimeInputWidget 一样简单。

<ul> / <li> 标记

Deform 使用 <ul> / <li> 标记来渲染序列。尽管可以争辩说这是语义正确的，但在表单渲染的上下文中这并不合理，并且需要相当多的额外 CSS 来产生令人愉悦的视觉效果。因此，deform_bootstrap 移除了所有列表标记，并生成无需额外 CSS 的漂亮表单。

为了使此功能不仅与固定长度的序列一起工作，还与可变长度的序列一起工作，需要在 deform.js 中的两个函数上进行修补。这可以通过简单地添加提供的 deform_bootstrap.js 到您的 JS 要求中来实现。如果您的应用程序不使用可变长度序列，您可以安全地跳过此步骤。

Chosen by Harvest

Chosen 是 HTML 选择元素的渐进增强替代品，它实现了单选和复选模式，这些模式提供了比标准小部件更好的用户体验。它具有自动完成功能、占位符支持和光滑的样式，无论与 Bootstrap 一起使用还是单独使用都看起来很好。有关文档和示例，请参阅 http://harvesthq.github.com/chosen/。本包只提供 jQuery 版本。

CSS

deform_bootstrap.css

此文件包含完整的 Bootstrap 2.0.1 CSS，以及日期选择器小部件的附加样式（见上方）。您可以使用它来为您的应用程序（非常适合初始开发），但可能还希望考虑为部署创建自定义版本。

jquery_chosen/chosen.css

这是ChosenSingleWidget和ChosenMultipleWidget的主要样式。

chosen_bootstrap.css

该文件包含解决chosen和bootstrap之间冲突的少量修复。只有在你使用chosen时才需要，如果不使用则无害。

bootstrap-datepicker.css

上述原生bootstrap日期选择器组件的样式。

请注意，chosen_bootstrap.css和bootstrap-datepicker.css包含在deform_bootstrap.css中，因此只有当你使用其他版本的bootstrap css时才需要它们。

JS

bootstrap-datepicker.js

只有当你想要使用上述原生bootstrap日期选择器组件时才需要。

bootstrap_typeahead.js

只有当你想要使用上述原生bootstrap日期选择器组件时才需要。

bootstrap.min.js

仅作为bootstrap_XXX.js文件的直接依赖项需要。

deform_bootstrap.js

只有当你想要使用可变长度序列时才需要（参见上方的“<ul> / <li> 标记”部分）。

jquery-x.x.x.min.js

只有当你想要使用其他JS资源时才需要。

jquery-ui-x.x.x.custom.min.js

只有当你希望使用deform的原始AutocompleteInputWidget而不是deform_bootstrap的TypeaheadInputWidget，或者使用deform的DateTimeInputWidget而不是deform_bootstrap的原生版本时才需要（参见上方）。

jquery-ui-timepicker-addon-x.x.x.js

与jquery-ui-x.x.x.custom.min.js相同。

jquery.form-2.96.js

只有当你想要在deform.Form中使用use_ajax=True时才需要。

jquery.maskedinput-x.x.js

只有当你想要在支持它的任何deform组件中使用mask='...'时才需要。

jquery_chosen/chosen.jquery.js

只有当你使用ChosenSingleWidget、ChosenOptGroupWidget或ChosenMultipleWidget时才需要。

LESS / twitter_bootstrap

根本不需要。仅用于内部构建包含额外日期选择器样式的自定义deform_bootstrap.css。

运行单元测试

$ bin/python setup.py dev
$ bin/py.test

deformdemo

deform_bootstrap通过了100%的deformdemo测试。请在提交补丁前运行Selenium测试。

然而，bootstrap需要比deform默认提供的更新版本的jQuery。这反过来又需要比2.43更高的jQuery.form版本，不幸的是，它在ajax处理方面不向后兼容。因此，deform_bootstrap目前无法支持deform的use_ajax功能。因此，相关的Selenium测试已被禁用，直到deform跟进。注意，你仍然可以使用jQuery.form本身。

运行Selenium测试

• 确保你已经安装了Java解释器。

• 下载Selenium Server的standalone jar文件 <http://seleniumhq.org/download/>。

• 使用demo.ini启动服务器。

• 在另一个终端中，使用以下命令启动服务器：

  java -jar selenium-server-standalone-X.X.jar

• 成功定义为在控制台上看到以下输出：

  01:49:06.105 INFO - 在0.0.0.0:4444上启动SocketListener 01:49:06.105 INFO - 启动了org.openqa.jetty.jetty.Server@7d2a1e44

$ bin/python deform_bootstrap/demo/test.py

Bootstrap 具有将文本前置或后置到 input[type=text] 表单元素的良好功能（见 http://twitter.github.com/bootstrap/base-css.html#forms）。要使用 deform_bootstrap，您只需在您的 colander.Schema 子类中，将 input_prepend 或 input_append 作为关键字参数传递给小部件构造函数即可。

class PersonSchema(colander.Schema):
    weight = colander.SchemaNode(
        colander.Integer(),
        title=u"Weight",
        widget=deform.widget.TextInputWidget(
            input_append="kg",
            css_class="span1",
        ))

bootstrap_form_style

Bootstrap 支持 四种表单样式。默认情况下，deform_bootstrap 使用 .form-horizontal 样式。您可以通过设置 Form 的 bootstrap_form_style 属性来指定其他样式之一。

myform = Form(myschema, bootstrap_form_style='form-vertical')

inline

Bootstrap 支持内联复选框和单选按钮选择。通常 RadioChoiceWidget 和 CheckboxChoiceWidgets 以每行一个选项的方式显示。要选择内联样式，请将选择小部件的 inline 属性设置为真值。

class MySchema(colander.Schema):
    choice = colander.SchemaNode(
        colander.String(),
        widget=deform.widget.CheckboxChoiceWidget(
            values=[(u'a', u'Apple'),
                    (u'b', u'Bear'),
                    (u'c', u'Computer')],
            inline=True))

0.2.9 - 2013-08-09

• 添加 bootstrap iconglyphs 并修复 deform_bootstrap.css 以指向它们。见 #61

• 添加只读文本输入，并使用 bootstrap 样式。

• 添加标签表单支持。有关详细信息，请参阅 README.rst。

0.2.8 - 2013-06-25

• 修复资源注册表。见 #56。

• 解决 Google AppEngine 上 broken resource_filename() 的问题。见 #57。

• 修复了如果一个映射/序列中的另一个字段标记为无效时，所有字段都被标记为无效的问题。见 #58。

0.2.7 - 2013-05-04

• 添加对 Py3k 的支持。见 #55。

• 提高测试覆盖率。见 #55。

0.2.6 - 2013-02-23

• 从 SelectWidget 继承 ChosenMultipleWidget。这修复了损坏的只读 SelectWidgets。见 #49。

• 在按钮构造函数中添加对 css_class 参数的支持。见 #48。

0.2.5

• 修复了 chosen 小部件值的规范化问题。（#40）

• 为 TypeAheadInputWidget 添加远程数据源，将 'source' 属性重命名为 'values'。（#37）

• 修复了 sequence_item.pt 在 Chameleon 中损坏的问题。（#39）

0.2.4 - 2012-10-24

• 添加缺少的要求（jQuery UI 时间选择器）。

0.2.3 - 2012-10-18

• 添加对 deform 的新可排序序列支持。见 #34。

0.2.2 - 2012-06-11

• 升级 Bootstrap 到 v2.0.4

• 为映射模板中验证错误添加缺少的 alert 类。

0.2.1 - 2012-04-17

• 添加 ChosenOptGroupWidget。

0.2 - 2012-03-20

• ChosenSingleWidget 和 ChosenMultipleWidget；包括 chosen 0.9.7 [mmariani]

• 添加对“内联”复选框和单选按钮选择的支持。

• 许多错误修正。感谢 dairiki。

0.1 - 2012-02-29

• 添加 TypeAheadInputWidget（带有 Selenium 测试）。

• 添加 DateTimeInputWidget（带有“原生”Bootstrap CSS/JS 和 Selenium 测试）。

• 摆脱 jQueryUI 旧代码。

• 摆脱 ul/li 标记旧代码。

• 重构/更新文档。

• 包括所有 JS/CSS 资源的最新版本，Bootstrap 2.0.1 LESS 文件，包含额外的日期选择器小部件。

0.1a5 - 2012-02-09

• 所有 deformdemo Selenium 测试通过。

• 添加序列模板。

0.1a4 - 2012-02-09

• 在 includeme 中，在重置整个渲染器之前，先添加 deform 搜索路径。

0.1a3 - 2012-02-03

• 对支持 Bootstrap 2.0 的更改。

• 添加通过 deform.Widget 构造函数的 input_prepend/input_append 关键字参数支持 Bootstrap 将文本前置/后置到 input[type=text] 的功能。