1

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

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)

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

当前形式：

我的用户表单

所需的输入字段样式：

在此处输入图像描述

所需的按钮样式：

在此处输入图像描述

4

2 回答 2

1

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

我会将引导程序添加到您的包中，然后添加适当的类名，这将添加一些默认样式：在您的粘贴部署配置文件（例如 development.ini）中，将变形引导程序添加到金字塔包含列表中，或者如果是金字塔则添加这一行.includes 设置不存在：

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

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

你input应该看起来像

<input class="form-control">

你button应该看起来像

<button type="button" class="btn btn-primary"></button>
于 2017-10-05T23:26:38.547 回答
1

一个典型的变形示例应用程序指示金字塔服务静态资产，例如 JavaScript 和 CSS 文件。应用程序使用config.add_static_view()注册deform包资产

def main(global_config, **settings):
    """pserve entry point"""
    session_factory = UnencryptedCookieSessionFactoryConfig('seekrit!')
    config = Configurator(settings=settings, session_factory=session_factory)
    config.include('pyramid_chameleon')
    deform.renderer.configure_zpt_renderer()
    config.add_static_view('static_deform', 'deform:static')
    config.add_route('mini_example', path='/')
    config.add_view(mini_example, route_name="mini_example", renderer="templates/mini.pt")
    return config.make_wsgi_app()

渲染表单的模板可以引用in标签提供的 JS/CSS 资源。deformhead这基本上是运行具有默认样式的变形应用程序所需的一切。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Deform Sample Form App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- JavaScript -->
    <script src="static/scripts/jquery-2.0.3.min.js"></script>
    <script src="static/scripts/bootstrap.min.js"></script>
    <tal:loop tal:repeat="js_resource js">
      <script src="${request.static_path(js_resource)}"></script>
    </tal:loop>

    <!-- CSS -->
    <link rel="stylesheet" href="static/css/bootstrap.min.css"
          type="text/css">
    <link rel="stylesheet" href="static/css/form.css" type="text/css">
    <tal:loop tal:repeat="css_resource css">
      <link rel="stylesheet" href="${request.static_path(css_resource)}"
            type="text/css">
    </tal:loop>

  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Sample Form</h1>
          <span tal:replace="structure form"/>
        </div>
      </div>
    </div>
  </body>
</html>

一个好的自定义方法是覆盖 Bootstrap 提供的任何 CSS 类或在自定义应用程序包中添加您自己的 CSS mypyramidapp。将 CSS 和/或 JS 资产添加到static或scripts文件夹 - 金字塔应用程序中的常用文件夹。您必须将这些资产注册到您的金字塔应用程序。

config.add_static_view('static_myapp', 'myapp:static')
config.add_static_view('scripts_myapp', 'myapp:scripts')

鉴于您可以在任何模板中包含自定义 CSS 文件，并使用常见的主题化方法以自定义样式呈现表单。

我认为重写 CSS 会更方便开始，因为您必须通过自定义 CSS 类来使用css_class参数变形小部件。

我建议您参考这些变形演示示例应用程序 - 一个更大和一个小型示例，用于演示变形功能和所需的金字塔应用程序设置。

于 2017-10-06T09:10:55.427 回答