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

15 réflexions sur “Comment importer bootstrap a son projet symfony 2

    1. Merci pour l’intérêt porté à mon blog ^^. Et c’est avec un plaisir immense que je continuerais à partager mes connaissances avec toute les personnes qui le souhaitent. A venir un petit tutoriel pour expliquer comment faire un bundle sous symfony et je vais commencer à faire mon projet donc je vais aussi faire des tutoriels sur Windows 8 et azure ^^

  1. Comment importer bootstrap a son projet symfony 2 Josselin CHEVALAY I was recommended this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are wonderful! Thanks! your article about Comment importer bootstrap a son projet symfony 2 Josselin CHEVALAYBest Regards Rolf

  2. Je suis impressionné du josselinchevalay.wordpress.com, j’ai besoin de le dire. Vraiment pas souvent que je rencontre un blog qui chaque éducative et divertissante, et laissez-moi vous informer, vous avez été touché le clou sur la tête. Votre concept est remarquable, la difficulté est une chose que peu de gens sont suffisamment parler intelligemment. Je suis très heureuse que je suis tombé tout cela dans mon chercher quelque chose à ce sujet.

  3. Vous pourriez certainement voir votre enthousiasme dans le travail que vous écrivez sur josselinchevalay.wordpress.com. Le monde espère encore plus passionnée des écrivains comme vous qui n’ont pas peur de dire comment ils croient. Toujours suivre votre cœur.

  4. Have you ever thought about creating an ebook or guest authoring on
    other blogs? I have a blog based on the same ideas you discuss and would love to have you share some stories/information.
    I know my visitors would appreciate your work. If you are even
    remotely interested, feel free to shoot me an email.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s