🥇 Bootstrap 3 no Symfony 2 com Composer e sem pacotes extras

Ao tentar integrar o Twitter Bootstrap com o framework Symfony2, me deparei com alguns artigos e questões SO referentes ao uso de bundles. Embora eu não tenha nada contra pacotes, cheguei a esta solução evitando-os. Principalmente porque não consegui fazer funcionar corretamente usando a abordagem de pacote …

Primeiro você precisa adicionar as dependências ao seu arquivo composer.json :

"require": {
    ...
    "twitter/bootstrap": "3.*",
    "components/jquery": "1.11.1"
}

Agora, adicione o seguinte ao seu app config config.yml , a fim de tornar o Assetic para gerenciar seus ativos de aplicativo:

# Assetic Configuration
assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ '*Place your bundle names here*' ]

    filters:
        cssrewrite: ~
    assets:
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/js/bootstrap.js
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/css/bootstrap.css
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/css/bootstrap-theme.css
            filters: [cssrewrite]

        bootstrap_glyphicons_ttf:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
            output: "fonts/glyphicons-halflings-regular.ttf"
        bootstrap_glyphicons_eot:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
            output: "fonts/glyphicons-halflings-regular.eot"
        bootstrap_glyphicons_svg:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
            output: "fonts/glyphicons-halflings-regular.svg"
        bootstrap_glyphicons_woff:
            inputs:
                - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
            output: "fonts/glyphicons-halflings-regular.woff"

        jquery:
            inputs:
                - %kernel.root_dir%/../vendor/components/jquery/jquery.js

Isso também garantirá que seu bootstrap.css encontrará os glifos adorados na pasta de fontes .

Agora, para incluir os ativos em seus layouts, você pode editar, por exemplo, :: base.html.twig

<head>
    ...
    {% stylesheets '@bootstrap_css' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
    {% endstylesheets %}
</head>
<body>
    ....
    {% javascripts '@jquery' '@bootstrap_js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
</body>

E voilà!

Related Posts