添加CSS到變形輸入表格

我使用Colander和Deform實現了一個簡單的表單;不過，我希望覆蓋默認的樣式表並提供我自己的樣式表。但是，我不知道如何爲表單提供我自己的樣式。這裏是我使用的代碼：添加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)

當我運行這個，我得到一個計劃，默認的用戶形式。我怎樣才能提供我自己的模板樣式的按鈕和輸入框？任何建議或答案非常感謝。

目前的形式：

所需的輸入域風格：

所需的按鈕樣式：

來源

2017-10-05 Ajax1234

當您忽略任何css_class屬性時，窗體是否使用默認引導樣式呈現？ –

@SaschaGottfried謝謝你的評論。實際上，當css_class屬性被省略時，表單不會呈現默認的引導程序樣式。 – Ajax1234

如果是這種情況，請查看成功集成變形的金字塔應用程序。有幾個陷阱，但正如我在我的回答中所表明的那樣，這不是火箭科學，文檔是足夠的。 –

你的慾望d輸入字段和提交按鈕看起來像Bootstrap樣式。

我會將bootstrap添加到您的包中，然後添加相應的類名稱，這將添加一些默認樣式：在Paste Deploy配置文件（例如development.ini）中，將deform_bootstrap添加到pyramid_includes列表中，行，如果一個pyramid.includes設置不存在：

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

這將使模板deform_bootstrap /模板到變形的搜索路徑。

你input應該像

<input class="form-control">

和你button應該像

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

來源

2017-10-05 23:26:38 GumZ

如何在我的項目中包含bootstrap？ – Ajax1234

這些建議已經過時了，因爲'deform'（https://github.com/Pylons/deform）帶有內置的Bootstrap 3樣式。 –

典型deform example application指示金字塔爲靜態的資產，如JavaScript和CSS文件等。應用程序註冊使用config.add_static_view()

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()

模板呈現形式可以參照JS/CSS assets provided by deform在head標籤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>

一個好的自定義方法，將覆蓋由引導提供任何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類來使用css_class參數變形小部件。

我建議您參考這些deformdemo示例應用程序 - 一個larger和一個mini示例來演示變形功能和所需的金字塔應用程序設置。

來源

2017-10-06 09:10:55

添加CSS到變形輸入表格

回答

相關問題