Symfony2 - Installer Bootstrap

, par  admin

Bonjour à tous,

Dans cet article nous allons configurer Symfony2 avec le fameux framework Bootstrap. Nous utiliserons pour cela un environnement de test sous Wamp.

Commençons par ajouter à notre composer.json les dépendances suivantes :

"twbs/bootstrap" : "3.*",
"components/jquery": "dev-master",
"oyejorge/less.php": "dev-master"

Fichier app/config/config.yml

# Assetic 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"

On lance une copie des assets à l’aide de la commande php app/console assetic:dump

Code à ajouter dans votre template twig :

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8" />
       <title>{% block title %}Mon titre{% endblock %}</title>
       

                {% 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 %}
       
       <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
   </head>
   
   <body>
       {% block body %}
       {% endblock %}

                {% block javascripts %}
           <script src="{{ asset('js/bootstrap.js') }}"></script>
                {% endblock %}
   </body>
</html>

Puis dans votre page index.html.twig

{% extends '::base.html.twig' %}

{% block body %}
<div class="container">
 <h2>Test Bootstrap</h2>
 <form role="form">
   <div class="form-group">
     <label for="email">Email:</label>
     <input type="email" class="form-control" id="email" placeholder="Enter email">
   </div>
   <div class="form-group">
     <label for="pwd">Password:</label>
     <input type="password" class="form-control" id="pwd" placeholder="Enter password">
   </div>
   <div class="checkbox">
     <label><input type="checkbox"> Remember me</label>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
 </form>
</div>

{% endblock %}

Attention, l’ordre des scripts est important. Le jquery.min.js doit être chargé avant le bootstrap.js pour pouvoir exécuter certaines fonctions, telles que le dropdown sur un menu par exemple.

Testons enfin notre page index.html.twig :

PNG

Enjoy :)

Un peu de théorie... Tous les cours théoriques