/ElaoThemeTwitterBootstrap3Bundle

Elao Theme Twitter Bootstrap 3

Primary LanguagePHP

ElaoThemeTwitterBootstrap3Bundle

Twitter Bootstrap 3 theme for Elao Theme Bundle

Form Themes

Three form layouts are provided:

  • form_default_layout.html.twig
  • form_horizontal_layout.html.twig
  • form_horizontal_partial_layout.html.twig

To theme all forms as default, in your app/config/config.yml file:

twig:
    form:
        resources:
            - "ElaoThemeTwitterBootstrap3Bundle:Form:form_default_layout.html.twig"

To theme a specifique form:

{% form_theme form 'ElaoThemeTwitterBootstrap3Bundle:Form:form_default_layout.html.twig' %}

Form Horizontal:

To theme a specific row as horizontal:

Theme your form with the form_horizontal_partial_layout.html.twig layout and specify the horizontal option when you need it:

{{ form_row(child, {horizontal: true}) }}

To theme a whole form as horizontal:

Theme the whole form with the form_horizontal_layout.html.twig layout:

{% form_theme form 'ElaoThemeTwitterBootstrap3Bundle:Form:form_horizontal_layout.html.twig' %}

Note: 100% of the form will be themed as horizontal. If you need one or more field to be standard, use the form_horizontal_partial_layout.html.twig layout.

You can also customize the grid behaviour of the field:

{{ form_row(child, {horizontal: true, label_columns: 2}) }}
{{ form_row(child, {horizontal: true, label_columns: 2, widget_columns: 4, grid_size: 6}) }}

Twig helpers

Tooltip & Popover data attributes renderers:

<a href="#" title="My title" {{ tooltip({placement: 'bottom'}) }}>
    Hover me!
</a>

The tooltip fuction accepts arguments as defined in Twitter Bootstrap 3

<div {{ popover({content: include('AcmeDemoBundle:Foo:bar.html.twig'), html: true}) }}>
    Click me!
</div>

The popover fuction accepts arguments as defined in Twitter Bootstrap 3

Note: These functions only render html attributes, you need to do the Javascript part, ex:

$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();