Qual è il modo corretto per aggiungere bootstrap per un symfony app?

Sto utilizzando il framework symfony da 3 a sviluppare una applicazione web. Ho bisogno di aggiungere boostrap funzionalità per la mia applicazione. Ho installato il bootstrap con il seguente comando. (Sto usando compositore.)

composer require twbs/bootstrap

Installa bootstrap per il fornitore dell’applicazione cartella. Più specificamente vendor\twbs\bootstrap.

Ho bisogno di collegare il bootstrap del css e js file dell’applicazione di twig template (che si trova in app\Resources\views) come attività.

ad esempio:

<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" />

Attività, ma funziona solo con i file che si trovano nel web (web\bundles\framework) cartella. Posso copiare quelli .css e .js file dal venditore cartella per cartella web manualmente per fare questo lavoro, ma ci dovrebbe essere un modo corretto di farlo (cioè: per aggiungere risorse). ad esempio: Un comando con bin/console?

Ogni aiuto è apprezzato.

 

6 Replies
  1. 5

    Symfony Best Practies dà la risposta a questo Problema: http://symfony.com/doc/current/best_practices/web-assets.html

    Se si sta sviluppando un’applicazione, è necessario utilizzare gli strumenti che sono raccomandati dalla tecnologia, come Bower e GruntJS. È necessario sviluppare la vostra applicazione frontend separatamente da Symfony backend (anche separando i repository se si desidera).

    Nel nostro progetto utilizziamo grugnito di costruire e concat i file nella cartella web-cartella.

  2. 8

    Sembra che questo non funziona più nel Symfony3.

    In Symfony3 il seguente dovrebbe funzionare:

    twig:
        form_themes: ['bootstrap_3_layout.html.twig']
    • Questo assicura che le forme sono creato con bootstrap classi e altri attributi, ma dobbiamo allegare il file del bootstrap da noi stessi.
    • non funziona per me . già aggiungere in app/config/config.yml
    • Questo funziona in symfony3
  3. 3

    Da questo link https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles (e cambiare twitterper twbs) questo è quello che ho nel mio config.yml:

    assetic:
        debug:          '%kernel.debug%'
        use_controller: '%kernel.debug%'
        filters:
            cssrewrite: ~
            jsqueeze: ~
            scssphp:
                formatter: 'Leafo\ScssPhp\Formatter\Compressed'
        assets:
            jquery:
                inputs:
                    - %kernel.root_dir%/../vendor/components/jquery/jquery.js
            bootstrap_js:
                inputs:
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/js/bootstrap.js
            bootstrap_css:
                inputs:
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap.css
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootstrap-theme.css
                filters: [ cssrewrite ]
            bootstrap_glyphicons_ttf:
                inputs:
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
                output: "fonts/glyphicons-halflings-regular.ttf"
            bootstrap_glyphicons_eot:
                inputs:
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
                output: "fonts/glyphicons-halflings-regular.eot"
            bootstrap_glyphicons_svg:
                inputs:
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
                output: "fonts/glyphicons-halflings-regular.svg"
            bootstrap_glyphicons_woff:
                inputs:
                    - %kernel.root_dir%/../vendor/twbs/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
                output: "fonts/glyphicons-halflings-regular.woff"

    Ho altre dipendenze nel mio composer.json come jsqueeze per esempio, o Leafo del scss processore, tra jquery e di più. Ho nel mio compositore file:

        "components/font-awesome": "^4.7",
        "components/jquery": "^3.1"
        "leafo/scssphp": "^0.6.7",
        "patchwork/jsqueeze": "^2.0",
        "symfony/assetic-bundle": "^2.8",
        "twbs/bootstrap": "^3.3",

    Ho quindi utilizzare questo per i css:

    {% stylesheets
        '@bootstrap_css'
        'my/other/scss_file1.scss'
        'my/other/scss_file2.scss'
    
        filter='scssphp,cssrewrite'
        output='css/HelloTrip.css' %}
    
        <link href="{{ asset_url }}" type="text/css" rel="stylesheet"/>
    
    {% endstylesheets %}

    e per il javascript, posto jquery primo:

    {% javascripts
        '@jquery'
        '@bootstrap_js'
        'my/other/js_file1.js'
        'my/other/js_file2.js'
    
        filter='?jsqueeze'
        output='js/HelloTrip.js' %}
    
        <script src="{{ asset_url }}"></script>
    
    {% endjavascripts %}

    Ho quindi utilizzare bin/console assetic:dump di compilare tutti i miei beni.

    Speranza di aiuto!

    • Questa è una grande risposta di Symfony2, ma non è più appropriato per il Symfony 3 versione la domanda chiedendo.
  4. 3

    Da Symfony v2.6 include un nuovo modulo tema progettato per Bootstrap 3 oficial documentazione

    # app/config/config.yml
    twig:
        form:
            resources: ['bootstrap_3_layout.html.twig']
            # resources: ['bootstrap_3_horizontal_layout.html.twig']
    • La stessa cosa è vera per la sinfonia 3?
    • Sì, la differenza tra sf2 sf3.8 (ultima LTS) è che, in symfony 3 non hanno deprecato chiamate sf2.8 ha. Perché ho effettuato “-1” puntuation?
    • Grazie, e io non ti danno -1. Ho dato +1, ora. 🙂
    • non funziona! [Symfony\Component\Config\Definition\Exception\InvalidConfigurationException] Unrecognized option "form" under "twig"
  5. 2

    L’approccio suggerito cambiato dal momento che versione di Symfony 4: Webpack Encore è utilizzato con npm /filati per impacchettare il CSS e JavaScript risorse, dove il framework Bootstrap può essere incluso.

    Iniziare l’installazione di Encore e seguire con Bootstrap, documentazione specifica. In sintesi, i seguenti comandi devono essere eseguiti:

    composer require symfony/webpack-encore-bundle
    yarn install
    yarn add bootstrap --dev
    
    # after making the required changes to webpack.config.js, app.js, run Encore
    yarn encore dev --watch
  6. 1

    Come soluzione alternativa, i collegamenti simbolici potrebbe essere creato automaticamente con i pacchetti di aggiornamento. Per esempio, in composer.json aggiungere un nuovo comando in "post-update-cmd":

    //...
    "scripts": {
            "post-install-cmd": [
                "@symfony-scripts"
            ],
            "post-update-cmd": [
                "@symfony-scripts",
                "rm web/bootstrap && ln -s -r `pwd`/vendor/twbs/bootstrap/dist/web/bootstrap"
            ]
        },

Lascia un commento