Fatal编程技术网
  • python/
  • Python 添加CSS以使输入表单变形

Python 添加CSS以使输入表单变形

python flask

Python 添加CSS以使输入表单变形,python,flask,deform,colander,Python,Flask,Deform,Colander,我用滤器和变形器实现了一个简单的形式；但是，我希望覆盖默认样式表并提供我自己的样式表。但是，我不知道如何为表单提供自己的样式。以下是我正在使用的代码： class Mapping(colander.Schema): Firstname = colander.SchemaNode(colander.String(), css_class='deform-widget-with-style') Lastname = colander.SchemaNode(colander.String(

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

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)
当我运行它时，我会得到一个计划，默认的用户表单。如何为按钮和输入框提供自己的模板和样式？非常感谢您的任何建议或回答

现行表格：

所需输入字段样式：

所需的按钮样式：

所需的输入字段和提交按钮类似于引导样式

我将添加到您的包中，然后添加适当的类名，这将添加一些默认样式：在粘贴部署配置文件（例如development.ini）中，将deform_引导添加到pyramid_includes列表中，或者如果pyramid.includes设置不存在，则添加此行：

[app:main]
...
pyramid.includes = deform_bootstrap
这将把deform_引导/模板中的模板放入deform搜索路径

您的
输入应该如下所示


<input class="form-control">



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


典型的示例指示pyramid服务于静态资产，例如JavaScript和CSS文件。应用程序使用

呈现表单的模板可以引用in
head
标记。这基本上就是使用默认样式运行变形应用程序所需的一切


<!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>


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

我认为重写CSS一开始会更方便，因为您必须使用
CSS\u class
参数传递自定义CSS类来变形小部件


我建议您参考这些deformdemo示例应用程序-a和一个示例来演示deform功能和所需的金字塔应用程序设置。
我如何在我的项目中包括引导？由于现在
deform
（）附带内置引导3样式。当您省略任何css_类属性时，表单是否以默认引导样式呈现？@saschagotfried感谢您的评论。实际上，当css_类属性被省略时，表单不会呈现默认的引导样式。如果是这种情况，请在成功集成deform后查看您的金字塔应用程序。这里有几个陷阱，但正如我在回答中所指出的，这不是火箭科学，文档也足够了。刚刚看到你用烧瓶给它贴上标签。本页上的所有建议都是针对金字塔应用程序中的用法。你在用烧瓶吗？@Saschagotfried是的，我在用烧瓶。

<!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>



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