添加CSS以变形输入表单
我正在使用漏斗和变形实现一个简单表单；但是，我希望覆盖默认的样式表并提供我自己的样式表。但是，我不知道如何为表单提供自己的样式。下面是我使用的代码：
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)当我运行它时，我得到了一个计划，默认的用户表单。如何为按钮和输入框提供自己的带有样式的模板？任何建议或答案都是非常感谢的。
当前表单：
所需的输入字段样式：
所需的按钮样式：
回答 2
Stack Overflow用户
发布于 2017-10-06 07:26:39
你想要的输入域和提交按钮看起来像Bootstrap风格。
我会将bootstrap添加到您的包中，然后添加适当的类名，这将添加一些默认样式:在粘贴部署配置文件(例如development.ini)中，将deform_bootstrap添加到pyramid_includes列表中，或者如果pyramid.includes设置不存在，则添加以下行：
[app:main]
...
pyramid.includes = deform_bootstrap这会将deform_bootstrap/templates中的模板放入deform搜索路径。
您的input应该如下所示
<input class="form-control">你的button应该看起来像这样
<button type="button" class="btn btn-primary"></button>Stack Overflow用户
发布于 2017-10-06 17:10:55
典型的deform example application指示金字塔提供静态资源，例如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()呈现表单的模板可以引用head标记中的JS/CSS assets provided by deform。这基本上就是使用默认样式运行deform应用程序所需的一切。
<!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类，或者在自定义应用程序包mypyramidapp中添加您自己的CSS。将CSS和/或JS资源添加到static或scripts文件夹-金字塔应用程序中的常见文件夹。您必须将这些资产注册到您的金字塔应用程序中。
config.add_static_view('static_myapp', 'myapp:static')
config.add_static_view('scripts_myapp', 'myapp:scripts')假设您可以在任何模板中包含您的自定义CSS文件，并使用常见的主题化方法在自定义样式中呈现表单。
我认为覆盖CSS在一开始会更方便，因为您必须使用css_class参数传递自定义CSS类来变形小部件。
我建议你参考这些deformdemo示例应用程序-一个larger和一个mini示例来演示deform功能和所需的金字塔应用程序设置。
https://stackoverflow.com/questions/46595927
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号