更改Symfony Form(引导程序3)的复选框设计

Question

目前我使用Symfony 3.0和默认的Bootstrap 3表单模板。bootstrap_3_layout.html.twig

我喜欢扩展表单模板，使我的所有复选框如下：

<div class="md-checkbox-list">
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox1" class="md-check">
        <label for="checkbox1">
            <span></span>
            <span class="check"></span>
            <span class="box"></span> Option 1 </label>
    </div>
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox2" class="md-check" checked>
        <label for="checkbox2">
            <span></span>
            <span class="check"></span>
            <span class="box"></span> Option 2 </label>
    </div>
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox3" class="md-check">
        <label for="checkbox3">
            <span></span>
            <span class="check"></span>
            <span class="box"></span> Option 3 </label>
    </div>
    <div class="md-checkbox">
        <input type="checkbox" id="checkbox4" disabled class="md-check">
        <label for="checkbox4">
            <span></span>
            <span class="check"></span>
            <span class="box"></span> Disabled </label>
    </div>
</div>

我怎么能这么做？我尝试了很多方法，但都没用。Symfony Form模板非常复杂。更改一些输入或其他简单的事情可以很好地工作，但复选框并不容易。

我希望有人能帮助我，因为我有很多这样的设计，我不知道如何将复选框样式修改为这样。

Answer 1

复选框由checkbox_widget块呈现。您需要创建自己的表单主题，用自己的布局覆盖此块。

当您处理复选框列表时，还必须自定义choice_widget_expanded块。这里需要小心，因为选项中使用的类型取决于是否可以进行多选（单选与复选框）。

Answer 2

您应该使用FormType来定义您的表单。

$builder->add('cb1',  CheckboxType::class)->add('cb2',  CheckboxType::class);

然后在你的树枝上，类似的东西

{{ form_start(form, { 'attr': { 'class': 'form-horizontal form-bordered'} }) }}
    <div class="form-group">
        {{ form_label(form.cb1, 'cb1 label', { 'attr': {'class': 'control-label'} }) }}
        {{ form_widget(form.cb1, { 'attr': {'class': 'form-control custom-cb-class'} }) }}
    </div>
{{ form_rest(form) }}
{{ form_end(form) }}