변형 입력 양식에 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을 추가하고 기본 스타일을 추가 할 적절한 클래스 이름을 추가하십시오. 붙여 넣기 배포 구성 파일 (예 : development.ini)에 deform_bootstrap을 pyramid_includes 목록에 추가하거나이 항목을 추가하십시오 A 라인 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

프로젝트에 부트 스트랩을 포함하려면 어떻게해야합니까? – Ajax1234

요즘은 '부트 스트랩 (bootstrap) 3 스타일링이 내장 된'변형 '(https://github.com/Pylons/deform)이 제공되기 때문에이 조언은 시대에 뒤떨어져 있습니다. –

전형적인 deform example application는 자바 스크립트와 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()

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>

좋은 사용자 정의 방식은 부트 스트랩에서 제공하는 CSS 클래스를 무시하거나 사용자 지정 응용 프로그램 패키지 mypyramidapp에 자신의 CSS를 추가하는 것입니다. 피라미드 응용 프로그램의 공통 폴더 인 static 또는 scripts 폴더에 CSS 및/또는 JS 에셋 추가 이러한 자산을 피라미드 응용 프로그램에 등록해야합니다.

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

당신이 어떤 템플릿에 사용자 정의 CSS 파일을 포함하고 사용자 지정 스타일에서 양식을 렌더링하는 데 공통 테마의 방법을 사용할 수 있음을 감안할 때.

css_class 매개 변수를 사용하여 위젯을 변형하기 위해 맞춤 CSS 클래스를 전달해야하기 때문에 CSS를 우선 적용하는 것이 더 편리하다고 생각합니다.

이러한 deformdemo 예제 응용 프로그램 - larger 및 mini 예제를 참조하여 기능 변형 및 피라미드 응용 프로그램 설치 요구 사항을 데모하는 것이 좋습니다.

출처

2017-10-06 09:10:55

답변

관련 문제