使用bootstrap自定义Symfony 2表单

Question

我有一个问题理解Symfony 2中的表单组件，首先我想用一些引导类自定义我的表单，但问题是我不知道如何，因为在twig模板中只有这些行

{% extends 'Bundle::layout.html.twig' %}

{% block content -%}
<div class="panel-heading"> <h3>Category</h3></div>
   <div class="panel-body">

       {{ form(edit_form) }}

          <ul class="record_actions">
         <li>
          <a href="{{ path('category') }}">
            Back to the list
          </a>
         </li>
        <li>{{ form(delete_form) }}</li>
         </ul>
   </div>
{% endblock %}

例如，我想使用bootstrap将表单更改为类似的内容

<div class="container">

  <div class="panel panel-default">
    <div class="panel-heading">Category </div>
      <div class="panel-body"> 
       <form class="form-horizontal">

         <div class="form-group">
            <label for="Name" class="control-label col-xs-2"> CategoryName</label>
            <div class="col-xs-6">
                <input type="text" class="form-control" required="" id="Name" placeholder="Category name" >
            </div>
         </div>



         <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">Edit</button>
            </div>
         </div>

       </form>

Answer 1

我相信您正在寻找的是在手动渲染每个字段的Symfony文档中找到的。 因此，您希望为您的表单执行以下操作：

<div class="panel-body">

   {{ form_start(edit_form  }}

   <div class="form-group">
        {{ form_label(edit_form.categoryName, 'CategoryName', {'label_attr': {'class': 'control-label col-xs-2'}}) }}
        <div class="col-xs-6">
            {{ form_widget(edit_form.categoryName, {'attr': {'class': 'form-control'}})  }}
        </div>
     </div>

     <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <button type="submit" class="btn btn-primary">Edit</button>
        </div>
     </div>
  {{ form_end(form) }}
</div>

或者沿着这些方向的东西。 如您所见，您可以向树枝渲染表单添加类。 有关树枝模板功能的完整参考，请参阅文档Twig参考

如果你也用树枝渲染按钮，那么你可以这样做：

<div class="form-group">
    <div class="col-xs-offset-2 col-xs-10">
        {{ form_widget(form.editButton, {'attr': {'class': 'btn btn-primary'}}) }}
    </div>
 </div>