Intégrer Twitter Bootstrap à votre projet Symfony est devenu extrêmement simple puisque le composer peut gérer cela.
Depuis votre console, rendez-vous dans le dossier de votre projet et installer votre dépendance de cette façon :
composer require twbs/bootstrap
Voilà, Bootstrap se trouve maintenant dans votre dossier "vendor". Il ne reste plus qu'à configurer assetic pour pouvoir compiler les fichiers less en css et utiliser Bootstrap dans nos layouts. Pour cela, il suffit d'ajouter la configuration pour bootstrap dans votre config.yml :
# app/config/config.yml ... # Assetic Configuration assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ ]
filters:
less:
node: /usr/local/bin/node
node_paths: [/usr/local/lib/node_modules]
apply_to: "\.less$"
cssrewrite: ~
Comme toujours dans ce fichier, respectez bien les indentations. Le chemin vers node est à adapter selon votre configuration système.
Il faut ensuite configurer assetic pour générer vos fichiers css et js.
# app/config/config.yml … # Assetic Configuration
assetic: ............ assets: bootstrap_css: inputs: - %kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less filters: - less - 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 output: js/bootstrap.js
Enfin, afin de profiter des icônes Glyphicon de Bootstrap, il faut ajouter la police dans votre dossier web. Il suffit simplement de copier le dossier FONTS de bootstrap vers votre dossier web
cp -a vendor/twbs/bootstrap/fonts web
Voilà, tout est prêt. il ne reste plus qu'à générer le dump assetic:
php app/console assetic:dump
Puis ensuite à ajouter le css et js dans votre template twig :
<!-- Bootstrap -->
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
<script src="{{ asset('js/bootstrap.js') }}"></script>
C'est tout, vous avez installé et configuré correctement Bootstrap + Glyphicon. Notez que vous devez ajouter jQuery pour utiliser les plugins javascript de Bootstrap. Si ce n'est pas le cas :
composer require components/jquery
j'ai réussi à faire toute les étapes sauf que cette ligne:apply_to: ".less$" dans app/config/config.yml ne passe pas il me marque une erreur.Ma question est: il s'applique sur quoi? node.js?
c'est pour préciser que ce filtre less n'est à appliquer que sur les fichiers avec l'extension .less
Merci pour la précision.Encore une question:
Faudrait-il que je mette le lien du dossier correspond: apply_to: "vendor/twbs/bootstrap/less"?
non, pas besoin, assetic surveillera tous les ficheirs de type .less dans votre porjet
symfony, pas besoin de préciser le chemin. Pour l'erreur, il faut peut-être vérifier l'indentation. J'avoue que le code sur l'article n'est pas très explicite au sujet de l'indentation.
Exemple :
http://symfony.com/doc/current/cookbook/assetic/apply_to_option.html
Voir ficheir joint en exemple, qui montre l'indentation de chaque ligne (même si dans ce cass, c'est pour .coffee)
Merci encore pour plus de précision.Je n'ai plus d'erreur qui s'affiche mais par contre après avoir mis le lien :
dans ma vue il n' y'a pas de présence de bootstrap.
Je sais pas si j'ai oublié quelque chose mais je pense avoir été fidèle au tutoriel.Merci encore pour l'aide.Van
Lors du dump assetic, le ficheir css est bien généré ? est-il présent dans votre dossier ?
regénérer les symlink ?
php app/console assets:install root --symlink
Essayez aussi de vider le cache avant de faire le dump :
php app/console cache:clear
voici les résultats après la commande :php bin/console assetic:dump
Dumping all dev assets.
Debug mode is on.
voici pour la seconde commande :php bin/console assets:install root --symlink
[InvalidArgumentException]
The target directory "root" does not exist.
pour la dernière:php bin/console cache:clear
[OK] Cache for the "dev" environment (debug=true) was successfully cleared.
Mais ça ne passe pas toujours
Par contre je ne sais pas ou est le dossier des fichiers css générés?
Utiliser plusieurs footer
Utiliser plusieurs footer pour , par exemple, avoir 2 bas de pages différents, 1 pour votre page d'accueil, et 1 pour la reste de votre blog.
Catégorie(s)
WordpressPerte de Traduction après mise à jour : la solution
Une mise à jour de votre thème ou d'un plugin vous a fait perdre vos traductions? Voici 2 solutions faciles et rapides à mettre en place pour ne plus jamais subir ce type de désagrément.
Catégorie(s)
WordpressPrestashop 1.6 : Modifier tous les prix en masse
Besoin d'augmenter, ou de baisser, tous les prix de votre catalogue prestashop en une seconde ? C'est possible, via 4 requêtes SQL simple
Catégorie(s)
Web DevGoogle fonts : intégration optimisée dans vos css
Une méthode simple pour intégrer au mieux vos polices depuis Google Fonts dans vos fichiers CSS afin d'optimiser le chargement de vos polices
Catégorie(s)
Web DevPourquoi j'ai abandonné Yoast SEO et quelle alternative
Nombreux Bugs, trop de mises à jour par mois, de la publicité dans tous les sens, les raisons de remplacer Yoast SEO par The SEO Framework sont nombreuses.
Catégorie(s)
SEO WordpressGoogle : outil pour refuser et désavouer des liens
Si vous estimez que le classement de votre site est mis à mal par la faible qualité des liens que vous ne contrôlez pas, vous pouvez demander à Google de ne pas les prendre en compte lors de l'évaluation de votre site.
Catégorie(s)
SEO