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表单模板非常复杂。一些输入或其他简单事物的变化工作正常，但复选框并不容易。

我希望有人可以帮助我，因为我有很多这样的设计，我不明白如何修改复选框样式看起来像这样。

Answer 1

复选框由checkbox_widget block呈现。您需要create your own form theme用您自己的布局覆盖此块。

当您处理复选框列表时，您还必须自定义choice_widget_expanded block。你需要在这里小心，因为在选择中使用的类型取决于是否有多种选择（无线电与复选框）。

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

更改Symfony Form（Bootstrap 3）的复选框设计

2 个答案: