Comment importer bootstrap a son projet symfony 2

Bonsoir,

Aujourd’hui j’ai peut rencontré un soucis que j’ai peut ressoude très vite mais qui m’a donner du fil à retordre. Bootstrap ! Comment fait on pour l’utiliser dans Symfony 2 ? bonne question non;).

Déjà avant de commencer parlons un peu de ce qu’est Bootstrap. C’est un framework css qui permet donc de rendre vos sites plus joli. Ce dit framework a était initié par twitter donc ne vous inquiéter pas si l’aspect de certaines choses vous parais familière.

Vous me dirait jusque là rien de nouveau, et pourtant ce framework utilise LESS, c’est langage pourrait-on dire qui va permettre optimisé le css. L’exemple le plus fragrant intervient sur l’héritage

.MonID #maclasse

{

font-family : Nyala ;

}

,MonID #maclasse ul

{

color:#E915F3 ;

}

cela fait beaucoup de code. Maintenant LESS

.MonID{

font-family:Nyala ;

#maclasse{

ul{color :#E915F3;}

}

}

Un peu moins non ? Pour ma part l’association LESS + Bootstrap s’avère parfait si comme moi, vous n’êtes pas bon en design.

Maintenant qu’on à vu un peu ce que ça apporte voyons comment le joindre dans nos projet.

Tout d’abord il faut le télécharger soit a la main mais je vous conseil de passer par le méthode je met mon lint git dans mon depts puis je fait :

php bin/vendors update

ensuite

php app/console assets:intall web

qui est un peu plus best pratrice !

Ensuite comme je vous les dit bootstrap utilise LESS il va donc falloir le télécharger aussi

mettez le dans src/namespace/monbundle/ressources/public/js

puis faite :

php app/console assets:install web (encore une fois ou rassembler les deux en un seul :p )

maintenant dans votre vue mettez y cela :

<link rel= »stylesheet/less » href= »{{asset(‘bundles/monbundle/css/bootstrap/less/bootstrap.less’)}} »>

<script src= »{{asset(‘bundles/monbundle/js/less-1.3.0.min.js’)}} »></script>

ensuite à vous de jouer !

Non je rigole pour le moment j’ai pas le temps de vous en montrez plus mes voici des liens bien fait:p

 Je le trouve bien celui-ci 😀

http://www.grafikart.fr/tutoriels/html-css/bootstrap-twitter-182

Publicités