Tuto Symfony 3 : Installation bootstrap

Avoir des pages web lisibles bien organisé et avec un design propre  est un facteur très important pour avoir un site web complet  , présentable et répondant aux normes seo. Pour cela il nous faut un effort pour écrire les feuilles de style soigneusement afin d'obtenir le résultat attendu.Pour faciliter cette tache et gagner du temps l'entreprise twitter a développe le framework bootstrap.

Alors bootstrap est un framework css et javascript qui a été développé pour faire des designs avec plus de précision et moins de complexité.L'utilisation de boostrap ne vous empêche pas de créer vos propres feuilles de style pour plus de personnalisation mais quand même il est largement suffisant pour obtenir un site web propre.

Dans ce tutoriel je vais vous montrer comment installer bootsrap 3.3.7  pour symfony 3.

Installation de assetic-bundle

D'abord il nous faut le bundle assetic.Depuis les dernieres versions de symfony assetic-bunle n'est plus téléchargé par défaut lors du téléchargement de symfony du coup il faut l'installer manuellement

$ composer require symfony/assetic-bundle

Ensuite dans le fichier AppKernel.php ajouter cette ligne:

new Symfony\Bundle\AsseticBundle\AsseticBundle(),


Ajout des dépendances
Dans le fichier composer.json ajouter les dépendances suivantes:

"require": {
..........
"twbs/bootstrap": "^3.3",
"components/jquery": "^3.1" ,
"oyejorge/less.php": "v1.7.0.14"
},

Ajout de la librairie less.php

$ composer require oyejorge/less.php

Configuration

Dans le fichier app/config/config.yml ajouter cette configuration:

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:    [ ]
   #java: /usr/bin/java
    java: C:\Program Files\Java\jdk1.8.0_65\bin\java.exe
    filters:
        cssrewrite: ~
        cssembed:
            jar: "%kernel.root_dir%/Resources/java/cssembed.jar"        
            yui_js:
            jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
        yui_css:
            jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
        lessphp:
            file: "%kernel.root_dir%/../vendor/oyejorge/less.php/lessc.inc.php"   
            apply_to: ".less$"
    assets:
        jquery_js:
            inputs:
                - "%kernel.root_dir%/../vendor/components/jquery/jquery.min.js"            
            filters: [?yui_js]
            output: js/jquery.min.js
           
        bootstrap_css:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less"
            filters:
                - lessphp
                - cssrewrite
            output: css/bootstrap.css            

        bootstrap_js:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/affix.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/alert.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/button.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/carousel.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/collapse.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/dropdown.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/modal.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/tooltip.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/popover.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/scrollspy.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/tab.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/transition.js"
            filters: [?yui_js]
            output: js/bootstrap.js             
        fonts_glyphicons_eot:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.eot"
            output: "fonts/glyphicons-halflings-regular.eot"
        fonts_glyphicons_svg:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.svg"
            output: "fonts/glyphicons-halflings-regular.svg"
        fonts_glyphicons_ttf:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.ttf"
            output: "fonts/glyphicons-halflings-regular.ttf"
        fonts_glyphicons_woff:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.woff"

            output: "fonts/glyphicons-halflings-regular.woff"

Copier les assets
Enfin il faut faire une copie des assets avec la commande assetic:dump

$ php bin/console assetic:dump

Maintenant les fichier css , js et fonts de bootstrap sont ajouté au repertoire web de notre projet.

Pour utiliser bootstrap vous devez faire appel aux fichiers css ,js et jquery 

{% block stylesheets %}

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

<script src="{{ asset('js/jquery.min.js') }}"></script>

<script src="{{ asset('js/bootstrap.js') }}"></script>

{% endblock %}

Mainetenat on peut creer des templates presentables avec beaucoup de

simplicité et d'efficacité.

Si vous n'avez pas déa utilisé bootstrap auparavant je voys conseille de suivre

les tutos de cette formation sur youtube .

https://www.youtube.com/playlist?list=PLULJlg8Kpb9U3sBUbsJ3Tdeh8VStR0Zy2