web-dev-qa-db-fra.com

Quelle est la bonne façon d’ajouter bootstrap à une application symfony?

J'utilise symfony framework 3 pour développer une application Web. Je dois ajouter les fonctionnalités de boostrap à mon application. J'ai installé bootstrap en utilisant la commande ci-dessous. (J'utilise compositeur.)

composer require twbs/bootstrap

Il installe bootstrap dans le dossier du fournisseur de l'application. Plus spécifiquement vendor\twbs\bootstrap.

J'ai besoin de joindre les fichiers css et js de bootstrap dans les modèles de brindille de l'application (situés dans app\Resources\views) en tant qu'actifs. 

par exemple.:

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

Mais les ressources ne fonctionnent qu'avec des fichiers situés dans le dossier Web (web\bundles\framework). Je peux copier manuellement ces fichiers .css et .js du dossier du fournisseur vers le dossier Web pour que cela fonctionne, mais il devrait exister une méthode appropriée pour le faire (c'est-à-dire: ajouter des éléments). Exemple: une commande avec bin/console?

Toute aide est appréciée. 

twitter-bootstraptwigcomposer-phpsymfony
11
Wickramaranga

Les meilleures pratiques de Symfony donnent la réponse à ce problème: http://symfony.com/doc/current/best_practices/web-assets.html

Si vous développez une application comme celle-ci, vous devez utiliser les outils recommandés par la technologie, tels que Bower et GruntJS. Vous devez développer votre application frontend séparément de votre serveur Symfony (même en séparant les référentiels si vous le souhaitez).

Dans notre projet, nous utilisons grunt pour créer et concaténer ces fichiers dans le dossier Web.

5
fucethebads

Il semble que cela ne fonctionne plus dans Symfony3. 

Dans Symfony3, les éléments suivants devraient fonctionner:

twig:
    form_themes: ['bootstrap_3_layout.html.twig']
8
Twoez

Depuis Symfony v2.6 inclut un nouveau thème de formulaire conçu pour Bootstrap 3documentation officielle

# app/config/config.yml
twig:
    form:
        resources: ['bootstrap_3_layout.html.twig']
        # resources: ['bootstrap_3_horizontal_layout.html.twig']
3
Roger Guasch

À partir de ce lien https://coderwall.com/p/cx1ztw/bootstrap-3-in-symfony-2-with-composer-and-no-extra-bundles (et changer Twitter pour twbs) c'est ce que je avoir dans mon 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"

J'ai d'autres dépendances dans mon composer.json, comme jsqueeze par exemple, ou le processeur scss de Leafo, parmi jquery et plus. J'ai ceci dans mon dossier de compositeur:

    "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",

Je l'utilise alors comme ça pour le 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 %}

et pour les javascripts, placez jquery en premier:

{% 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 %}

J'utilise ensuite bin/console assetic:dump pour compiler tous mes actifs.

J'espère aider!

3
Xavi Montero

L'approche suggérée changé depuis Symfony version 4: Webpack Encore est utilisée avec npm/yarn pour regrouper les ressources CSS et JavaScript, dans lesquelles le cadre Bootstrap peut être inclus.

Commencez par en installant Encore et suivez avec la documentation spécifique à Bootstrap . En résumé, les commandes suivantes doivent être exécutées:

composer require encore
yarn install
yarn add bootstrap --dev

# after making the required changes to webpack.config.js, app.js, run Encore
yarn encore dev --watch
1
Siavas

Comme solution alternative, les liens symboliques pourraient être créés automatiquement lors de la mise à jour des packages. Par exemple, dans composer.json, ajoutez une nouvelle commande dans "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"
        ]
    },
1
slava