assetic / composer / php / symfony2 / twitter-bootstrap

Use o Twitter Bootstrap no Symfony2 com Composer

ATUALIZAR

** Uma versão atualizada pode ser encontrada aqui ** https://www.jverdeyen.be/symfony2/bootswatch-bootstrap-symfony2/

Um pequeno guia de introdução sobre como usar / instalar o Twitter Bootstrap em um projeto Symfony2.

composer.json

Primeiro de tudo, adicione o repositório de bootstrap do Twitter em seu composer.json

"repositories": [
    {
       "type": "package",
       "package": {
           "version": "2.2.1",
           "name": "twitter/bootstrap",
           "source": {
               "url": "https://github.com/twitter/bootstrap.git",
               "type": "git",
               "reference": "master"
           },
           "dist": {
               "url": "https://github.com/twitter/bootstrap/zipball/master",
               "type": "zip"
           }
       }
    }
]

você também pode querer adicionar o repositório jquery, pois você vai precisar dele para executar os arquivos js de bootstrap

Adicione o seguinte em sua seção necessária

"require": {
     ..
   "symfony/assetic-bundle": "2.1.*", 
   "leafo/lessphp": "*",
   "twitter/bootstrap": "*",

    ...
},

Execute a atualização do composer para obter os pacotes de que você precisa.

config.yml

Prefiro usar um assetic.yml separado e incluí-lo no arquivo config.yml.

Você terá que baixar cssembed e yuicompressor.
cssembed
yuicompressor

assetic:
  java: /usr/bin/java
  filters:
    cssembed:
      jar: %kernel.root_dir%/Resources/java/cssembed-0.4.5.jar
    yui_js:
      jar: %kernel.root_dir%/Resources/java/yuicompressor.jar
    lessphp:
      file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
      apply_to: ".less$"
  assets:
    jquery_js:
        inputs:
            - '%kernel.root_dir%/app/Resources/public/js/vendor/jquery.js'
        filters: [?yui_js]
    bootstrap_js:
        inputs:
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-transition.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-alert.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-modal.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-dropdown.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-scrollspy.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-tab.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-tooltip.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-popover.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-button.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-collapse.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-carousel.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-typeahead.js'
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/js/bootstrap-affix.js'
        filters: [?yui_js]
    bootstrap_less:
        inputs:
            - '%kernel.root_dir%/../vendor/twitter/bootstrap/less/bootstrap.less'
        filters: [lessphp,cssembed]

layout.html.twig

Para fazer isso funcionar, precisamos adicionar esses ativos em nosso modelo de layout (ou qualquer outro)

{% block javascripts %}
  {% javascripts '@jquery_js' '@bootstrap_js' filter='?yui_js' combine=true %}
     <script src="{{ asset_url }}"></script>
  {% endjavascripts %}
{% endblock %}

{% block stylesheets %}
  {% stylesheets '@bootstrap_less' combine=true %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
 {% endstylesheets %}
{% endblock %}

Isso deve funcionar!

Related Posts