python - 添加 CSS 使输入表单变形

Question

我正在使用 Colander 和 Deform 实现一个简单的表单；但是，我希望覆盖默认样式表并提供我自己的样式表。但是，我不知道如何为表单提供自己的样式。这是我正在使用的代码:

class Mapping(colander.Schema):
   Firstname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
   Lastname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
   Email = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
   date = colander.SchemaNode(colander.Date(), widget = deform.widget.DatePartsWidget(), description = "content date")

class Schema(colander.Schema):
    Age = colander.SchemaNode(colander.Integer(), css_class='deform-widget-with-style')
    Firstname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
    Lastname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')
    Email = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style')


form = deform.Form(topList(),buttons=('submit',)).render(controlData)

当我运行这个时，我得到一个计划，默认用户表单。如何为我自己的模板提供按钮和输入框的样式？非常感谢任何建议或答案。

当前形式:

所需的输入字段样式:

所需的按钮样式:

Answer 1

您所需的输入字段和提交按钮看起来像 Bootstrap 样式。

我会添加bootstrap到您的包中，然后添加适当的类名，这将添加一些默认样式:在您的 Paste Deploy 配置文件(例如development.ini)中，将 Deform_bootstrap 添加到 Pyramid_includes 列表中，或者如果 Pyramid.includes 设置确实如此，则添加这一行不存在:

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

这会将 deform_bootstrap/templates 中的模板放入变形搜索路径中。

您的输入应如下所示

<input class="form-control">

你的按钮应该看起来像

<button type="button" class="btn btn-primary"></button>