Auteur
Grafikart

125 Commentaires

4ab8edae1ad061719e990f908a550a46?s=200&r=pg&d=mm
DavidOn, 17-11-2014 19:33:43 - Répondre

Bonjour,
j'aime bien votre tutoriel, bravo.
J'aimerais savoir, si j'utilise bootstrap au sein d'une application hybride mobile (framework cordova), j'ai une page d'accueil composée de 6 rubriques (3 lignes sur 2 colonnes), quelle sera la taille des images (en pixel) de chacune de ces rubriques pour qu'elle soient adaptées aux différentes résolutions des téléphones (en mode portrait seulement) ?
Merci me d'aider.

D2e87e1360f5f24cc3a1d8f487d6d23d?s=200&r=pg&d=mm
Bori Olivier, 02-11-2014 15:54:39 - Répondre

Idem++

28378
nzoway, 24-10-2014 16:51:16 - Répondre

j'ai adoré ce tutoriel mais j'aurais une suggestion sur ce sujet.
Je sais que le tutoriel date un peu mais j'ai pu mettre en place un site tout beau avec de jolies notifications et avec de beaux boutons bleu (twitter oblige), et ainsi dans un élan de confiance, j'ai voulu mettre mes couleurs, mes images, mes propres boutons.

Et c'est la que ça bloque, le twitter bootstrap utilise une structure bien définie à travers une multitudes de classes et d'ID, appliquant parfois un "background: #eee" sur trois niveau de parents dans le DOM.
dans mon css ajouté a la suite, je dois donc appliquer le style que je veux sur ces trois éléments pour la modification soit prise en comptes (c'est en quelque sorte un "recouvrement" de style).
Cette méthode me semble un peu "bourrin" et pas très efficace question gain de temps (car je dois systématiquement analyser chaque parents des éléments que je veux modifier).

c'est pour cela que ça serais une bonne idée d'avoir un tutoriel (suite à celui du dessus), pour personnaliser son site tout en gardant la structure "bootstrap", car je pense que je ne suis pas le seul newbie qui utilise le bootstrap de twitter.

9cc4e189ba3b61975961a8bb4797e83d?s=200&r=pg&d=mm
labardass, 05-04-2014 03:19:21 - Répondre

lien utilisable pour le bootstrap http://docs.bootcss.com/bootstrap-1.2.0/bootstrap-1.2.0.css

39751e36a1d884ea4691d60bc1157ff8?s=200&r=pg&d=mm
mortagus, 15-01-2014 21:33:11 - Répondre

La vidéo est super comme beaucoup d'autre.
Par contre, ça serait super de la refaire car Twitter Bootstrap à bien évoluer et pas mal d'éléments utilisés dans la vidéos ne sont plus valable.

98491c6ea65254a894ffdabc1857d7f0?s=200&r=pg&d=mm
Ghislain Gt, 06-07-2014 21:25:26 - Répondre

Complètement d'accord avec @mortagus, il serait vraiment intéressant de voir petit update du tutoriel avec les nouveautés du design 3.x. Merci pour tes vidéos !

F2eb18d88e0e67ef76ec3598bd7b8d87?s=200&r=pg&d=mm
nan, 18-12-2013 15:22:40 - Répondre

qqn connait un lien qui marche ?? http://twitter.github.io/bootstrap/ marche plus!

0312a8fb0884bc2cfcea4009ebabbab3?s=200&r=pg&d=mm
khaleader, 07-01-2014 23:50:21 - Répondre

http://bootstrapdocs.com/v2.0.2/docs/

844d950fbddf51e9ec073e2f5f216bea?s=200&r=pg&d=mm
Super_panda, 14-12-2013 03:04:24 - Répondre

Salut! Ca a l'air super mais le lien vers bootstrop twitter est mort :( ...
Une solution?

http://twitter.github.io/bootstrap/

merci!

Cbc5ba6814678af8fc5d6fe9383a5b25?s=200&r=pg&d=mm
malika, 01-11-2013 11:10:49 - Répondre

Un grand merci, votre tuto est complet, clair… un en mot comme en cent : parfait :-)

D708f7981b5caf917a9af2886f0a3d27?s=200&r=pg&d=mm
Sennad, 15-10-2013 16:35:20 - Répondre

Waw ! Super tuto j'ai pas pus m’arrêter !
Merci 1000 fois pour ce tuto vraiment bien fait :)

33126886acb955e97d9e3a6bd0df720c?s=200&r=pg&d=mm
rémi téou, 09-09-2013 00:32:33 - Répondre

Un signet à ajouter aussi http://twittstrap.com/resources/

4a97ba1f24cddd8bc14c17a31da86ae9?s=200&r=pg&d=mm
Marcus Wright, 04-07-2013 13:33:17 - Répondre

Merci pour cet enseignement

D7dc3ce6b35f3cf060a5ddc3057d93f4?s=200&r=pg&d=mm
Zied Ellouze, 31-05-2013 15:09:13 - Répondre

Super tutoriel.
merci :)

22e83174a409fc920806c644d2d052f7?s=200&r=pg&d=mm
Mistra Formation, 22-05-2013 17:28:44 - Répondre

Bonjour,

si vous souhaitez plus de détails sur Bootstrap, nous proposons une formation BootStrap dans toute la France, financable par votre DIF : http://dev.mistra.fr/formations-developpement-web/formation-bootstrap.html

A bientôt

L'équipe Mistra Formation

32e513efe9098d78d71b4ebc06dc3197?s=200&r=pg&d=mm
newbee, 13-05-2013 15:10:20 - Répondre

super ca marche merci

0909bcd38ce057d9f0e10197e2db667b?s=200&r=pg&d=mm
zorg, 11-05-2013 16:37:51 - Répondre

bonjour,
le tuto est tres cool!!
mais j'ai une question, je code avec phpstorm6 qui prend en charge les M.A.J des fichier LESS, et je voudrais integer Bootstrap twitter a symfony 2.2.1??

j'ai bien installe la ver "bootstrapTwitterBundle" du site officiel, mais je but sur tout! rien ne fonctionne.
avez vous une solution?

4b743b0f0caa02b8f635ae121ec563df?s=200&r=pg&d=mm
jrtprod, 02-06-2013 12:21:42 - Répondre

Pour intégrer Bootstrap dans symfony tu as cet article qui propose une solution détaillée

http://www.equation.fr/equablog/2013/06/01/symfony-2-bootstrap-assetic/

70c734c55f50fd674fb9017f0f3ab899?s=200&r=pg&d=mm
zorg-27, 19-06-2013 23:56:48 - Répondre

Merci, pas mal !!

686d2930ae6fa6439ec076f01ae5d535?s=200&r=pg&d=mm
Jérémy, 17-04-2013 22:51:23 - Répondre

@ALL : Beaucoup de chose on changer depuis cette vidéo, vous pouvez vous référez à la doc: http://twitter.github.io/bootstrap/

13e89ddd17791cbd6d94f277d248c76f?s=200&r=pg&d=mm
giizmo, 28-03-2013 22:42:30 - Répondre

le declenchement d'erreur et le modal ne fonctionne pas chez est normal ?

13e89ddd17791cbd6d94f277d248c76f?s=200&r=pg&d=mm
giizmo, 28-03-2013 14:47:51 - Répondre

je voudrais savoir comment faire avec le bootstrap pour avoir le footer comme sur ce site (grafikart.fr)

merci d avance a ce qui m aideront ^^

026d89a8598c2c59f72da82f572d9418?s=200&r=pg&d=mm
Loic88, 22-03-2013 21:38:28 - Répondre

Voici un substitut pour bootstrap, il ajoute quelques fonctionnalité comme le style pour les champs de type file : http://jasny.github.com/bootstrap/index.html

4e19388d0de2daf9b1ccaf3324421eb6?s=200&r=pg&d=mm
Nilmar4, 13-03-2013 15:18:13 - Répondre

Mais comment faut-il faire avec le nouveau site de Bootstrap ? En effet il n'y plus le lien (link) pré-écrit sur le site qui permet de lier le css de Bootstrap à la page, comment faire alors ?

9d729fa3c50c478a836ef9bf2f3acc2b?s=200&r=pg&d=mm
Carolyn, 13-03-2013 11:55:28 - Répondre

Merci Twitter pour cette magnifique contribution !

Ef16db09fef307d13d1f561e9c97177f?s=200&r=pg&d=mm
aminezzayer, 09-03-2013 02:16:05 - Répondre

Merci pour ce tutoriel formidable, je commente en retard mais je l'ai vu dé sa sortie, a ce jour la je connaissait les framework CSS mais Bootstrap c'est le top je travail qu'avec maintenant dans mes projet perso et free-lance.

merci une autre fois pour ce tuto et bonne continuation.

3cf3b4f7077268868f6af822a1be5d99?s=200&r=pg&d=mm
techmen, 05-02-2013 20:55:05 - Répondre

voici une version RTL: https://github.com/donaldducky/bootstrap-rtl

46496c5d3f017b703191333e723f2e59?s=200&r=pg&d=mm
Djb, 27-01-2013 20:11:40 - Répondre

Merci pour ce tutoriel en espérant une petite mise à jour suite à la nouvelle version du bootstrap.

j'ai pu créer mon site http://psd-html.fr avec votre tutoriel.

cordialement,

Djb

C0a9464fa69361259cd6cb102869dc66?s=200&r=pg&d=mm
fallendeath, 27-01-2013 13:16:22 - Répondre

A quand une mise à jour de ce tutoriel pour la version 2 du bootstrap ?

7149b5aca88cd34cf955df8a823123a6?s=200&r=pg&d=mm
beni, 26-11-2012 16:41:22 - Répondre

good doc

D75fa7393f3d119a36c105de82497182?s=200&r=pg&d=mm
airGuillaume, 31-10-2012 11:19:17 - Répondre

Super tuto, simple et utile. Je ne voyais pas l'intérêt mais en fait, c'est génial. Un moment qui m'a bien fait rire (je suis peut-être le seul), c'est le passage des checkboxs! Homme / femme. En checkbox... Sans contrefaçon je suis un garçon!

D94440d83d3ae758bf0d6e7f430f63b3?s=200&r=pg&d=mm
Zibwood, 12-10-2012 02:20:37 - Répondre

La doc officielle est très complète ...

Db807e12184092e0a5949ac64d875242?s=200&r=pg&d=mm
wolfes76, 06-10-2012 19:37:56 - Répondre

oui comment on fait maintenant ? vue que ils ont fait une maj?

A5389841c880ec8e45a1c1f6f424844e?s=200&r=pg&d=mm
cycybz, 06-10-2012 15:17:07 - Répondre

Merci, c'est super et a encourager

20e4443a644db8cfec8cd8ca2b30572c?s=200&r=pg&d=mm
Shad, 28-09-2012 13:56:39 - Répondre

La vidéo est obsolète oui mais ça permet de voir un peu les structures qui sont toujours valides.

55fb2631b1c201a78dc17e8c3458ff4c?s=200&r=pg&d=mm
zyrtec, 26-09-2012 19:39:13 - Répondre

Dommage qu'il ne soit plus disponible maintenant faut trouver un tutoriel pour les nouvelle version :(

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
ulysse, 21-08-2012 20:42:40 - Répondre

Bonjour,

Je débute un peu dans le monde du développement web et je voudrais savoir quel l'éditeur de texte qui est utilisé ici ??

Merci :)

PS: très bon tuto !

40441a828ca5fd2281f97f3fe01b950d?s=200&r=pg&d=mm
XdiZ, 23-08-2012 13:15:28 - Répondre

C'est SublimeText, il a fait des tutos sur cet éditeur ;)

F7a4c0ea9003a4571de5087a18dc8f00?s=200&r=pg&d=mm
mrtomtom, 17-08-2012 13:36:30 - Répondre

pouvez vous refaire ce tuto avec la nouvelle version SVP. J'ai eseiller mai sertaine chose on changer et je ny arive pas Merci d'avence :)

9b76c60133bbe8268fba345112d2bec5?s=200&r=pg&d=mm
Maxime, 03-08-2012 18:17:41 - Répondre

Un grand merci pour cette présentation qui me donne vraiment envie d'utiliser ce bootstrap !!!

Par ailleurs, j'utilise Zend Framework et malheureusement le moteur Zend_Form ne permet pas d'utiliser le bootstrap de Twitter pour les formulaires... snif...

Quelqu'un peut-être aurait une solution pour y remédier ? Ou un lien vers une doc ? Je n'ai pas trouvé malgré mes recherches...

Encore merci !

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
debug All, 27-07-2012 22:14:05 - Répondre

Tres bon tuto
Serait il possible d'avoir votre fichier source html ?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Rononos, 15-07-2012 23:11:29 - Répondre

Un grand merci pour cette présentation ! En très peu de temps j'ai pu voir que bootstrap était parfaitement adapté pour mon futur site.

4e636d1c3a0087abd024423fa0013118?s=200&r=pg&d=mm
Guillaume, 09-07-2012 02:14:12 - Répondre

Merci pour ce tutorial que j'ai regardé en entier :-)

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Perbitsu, 02-07-2012 16:03:47 - Répondre

Merci beaucoups ! Super tuto !

65ce90926fd3a497c6e5a21c1a31fc21?s=200&r=pg&d=mm
Yoan, 29-06-2012 01:54:51 - Répondre

RECOMMANDATION :
Sauvegardez le fichier CSS du bootstrap sur votre ftp, afin de ne pas avoir le même problème qu'ici : la démo ne représente plus ce qu'on voit à la vidéo (car le css à changer depuis).

le liens du nouveau fichier css du bootstrap :

http://twitter.github.com/bootstrap/assets/css/bootstrap.css

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
sakoche, 28-06-2012 14:06:15 - Répondre

Bonjour,

Merci beaucoup pour ce tuto!
J'ai juste un souci , il semble que je n'ai pas le même fichier css bootstrap de base, je n'ai pas la classe secondary nav, ou encore menu?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Adri, 28-06-2012 17:23:52 - Répondre

C'est normal il a changé, http://twitter.github.com/bootstrap/scaffolding.html il faut s'aider en parallèle de ce site pour retrouver les bonnes classes

9dfa19c9365d8b8005990571b304a716?s=200&r=pg&d=mm
jb, 25-06-2012 13:26:20 - Répondre

pour le navbar je pense que le code a changé:

<div class="navbar">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>

07f9eb0488ec30004027c201b7a1cafb?s=200&r=pg&d=mm
Wizix, 23-06-2012 18:33:20 - Répondre

Comment tu fais dans Sublime Text 2 pour écrire des raccourcis aussi vite ??

Eed3f98a52a56023b147cd9caf6e0c32?s=200&r=pg&d=mm
Adri, 28-06-2012 00:52:58 - Répondre

Pareil comment on fait pour faire des raccourcis aussi vite et comment fait-on pour ajouter intégrer du code déjà fait à l'intérieur d'une DIV ?

F1bdccec0b0edc46de100caa2b77a051?s=200&r=pg&d=mm
deltackro, 26-08-2012 00:08:54 - Répondre

Grâce au plugin Zencoding

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
tggarm, 21-06-2012 10:55:58 - Répondre

Super tutoriel francophone. Tous mes encouragements.

9dfa19c9365d8b8005990571b304a716?s=200&r=pg&d=mm
jb, 20-06-2012 21:06:35 - Répondre

merci super tuto!!

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Caramella, 25-05-2012 13:13:06 - Répondre

Je dirais que ton tuto est parmi les meilleurs vidéos faite sur le Bootstrap de twitter.

61a231eddacf427d4e21f82aee348375?s=200&r=pg&d=mm
Auberland, 16-05-2012 14:36:57 - Répondre

Merci beaucoup pour ce magnifique tuto, très bien expliquer; bravo

E7cddb2b4dd15d9254d41ac757a6e11e?s=200&r=pg&d=mm
Alpha13, 25-04-2012 15:23:15 - Répondre

Très bon tutoriel, merci beaucoup !

596e919239019ea4d00e9e93519c42c2?s=200&r=pg&d=mm
sebastien, 25-04-2012 14:17:55 - Répondre

c'est quoi le logiciel que tu utilises pour ecrire le code html dans le tuto ?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Nacim, 19-05-2012 21:21:55 - Répondre

Salut, je pense qu'il utilise "siblime text 2", il y'a un tuto sur grafikart pour apprendre a l'utiliser :)

9e6d721f787ea911e612694e6ea15187?s=200&r=pg&d=mm
jo.calen, 22-04-2012 18:03:11 - Répondre

Merci pour ce tuto. Une question comment alléger les css de manière automatique lorsqu'on utilise peu de leur ressource ? Il y a des outils genre dust-me mais il ne nettoient pas ils cherchent seulement....

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
nacim , 19-05-2012 21:24:13 - Répondre

sur le site de bootstrap , va sur l'onglet 'costumize', et tu va trouver ton bonheur.

1acf1de9f688761a6bc152b3302e8b33?s=200&r=pg&d=mm
substances, 17-04-2012 12:33:44 - Répondre

et du coup comment on peut faire quand on veut lier les styles du bootstrap comme dans le tuto "Développer un site de A à Z en php" ?? :-(

130ecd82f8b85988cfa592241118c4ba?s=200&r=pg&d=mm
Bruno, 17-04-2012 23:07:13 - Répondre

Salut substances,

Tu peux télécharger les fichiers nécessaires sur le site déjà donné par Grafikart.
http://twitter.github.com/bootstrap/

Mais il est vrai qu'une autre vidéo sur le sujet pour la nouvelle version serait pas de refus.

Bruno

8a5b9d17248e0a9b953c0d5b94a9f2cb?s=200&r=pg&d=mm
charaf, 16-04-2012 22:20:05 - Répondre

oui le css est mort après la sortie de la nouvelle version de bootstrap v2 :(

130ecd82f8b85988cfa592241118c4ba?s=200&r=pg&d=mm
Bruno, 15-04-2012 23:48:57 - Répondre

Bonjour,

Merci Grafikart pour ton tuto comme pour tout les autres.
Il serait bien de mettre à jour ce tuto car pas mal de chose on changé.
Déjà comme tu le sais le lien direct au css n'est plus valable, les nom des class ont changé etc, etc.

Merci
Bruno

C7ea035e5ee4eb442f46a9db172d7822?s=200&r=pg&d=mm
galadiel, 14-04-2012 18:46:43 - Répondre

Encore un super tuto ;-)
Mais ne faudrait il pas le mettre à jour car la version de Bootstrap a évolué ! Mais c'est vrai qu'avec ce tuto nous pouvons tout de même bien nous débrouiller ;-)

4a942b351908816e70d417f0f31db952?s=200&r=pg&d=mm
unicolored, 11-04-2012 10:48:03 - Répondre

Merci pour ce super tuto !

F35aa20cc65b423e6b12e76c60223925?s=200&r=pg&d=mm
dready, 09-04-2012 18:44:59 - Répondre

Merci encore pour ce tuto, ça c'est le genre d'outil qui accélère tellement la productivité sur des projets adéquats :D

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Hoki, 04-04-2012 20:16:45 - Répondre

Les variables ne sont pas des défauts, bien au contraire. Si le pink en correspond pas, tu change le nom avec une petite substitution...

Pour l'auto-complétion, ce n'est propre à l'éditeur. L'extension se nomme sparkup, et c'est vrai que c'est assez cool à utiliser.
Disponible sous vim et textmate à ma connaissance (bien que l'éditeur utilisé ne soit ni l'un ni l'autre).

Merci pour le tuto, très bien fait pour un aperçu rapide.

22d0117475768884fd7f4268e1cead53?s=200&r=pg&d=mm
Lucoulouz, 23-03-2012 10:48:07 - Répondre

Bonjour,

Très bon tutorial, je découvre Bootstrap et cette vidéo m'a beaucoup appris. (Même si le version 2.0 est sorti depuis)

Je suis débutant en développement web et j'aimerai savoir quel est l'éditeur de texte que tu utilise dans ta vidéo. J'ai étais impressionné par la rapidité d'écriture grâce à l'auto-complétion.

Merci et bonne continuation,

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
tcit, 17-03-2012 21:24:22 - Répondre

Le CSS de l'exemple est mort :-(

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
switcherdav, 15-03-2012 21:51:14 - Répondre

Excellente cette vidéo, je découvre Bootstrap et c'est vraiment pratique pour moi qui développe plus des app que des sites.

PS : tu te démerdes sacrément bien avec Sublime Text !

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
tiboc77, 14-03-2012 10:59:11 - Répondre

Super tuto ! Je suis également impressionné par votre environnement de dév, pouvez-vous me dire quelle extension Chrome vous utilisez pour voir quels styles sont appliqués en temps réel à un élément ?
Merci :)

B02fb35470731fb1ab90b2de35a6afce?s=200&r=pg&d=mm
sawy, 01-03-2012 09:59:14 - Répondre

Très bon tuto, mais avec toute ces div et class, je commence a ne plus savoir comment placer les balises " <header> <nav> <section> " et utiliser HTML5 avec ce système. J'ai l'impression qu’après il y a pas mal de div qui rende le code assez lourd

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Dijix12, 26-02-2012 14:41:54 - Répondre

En cherchant un peu j'ai trouvais ceci http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css pour ma part il est identique au 1.2.0 donc j'espère que ça vous aidera. Sinon très bon tuto ;)

13e89ddd17791cbd6d94f277d248c76f?s=200&r=pg&d=mm
giizmo, 25-03-2013 16:59:57 - Répondre

merci pour le lien car l ancien ne fonctionne plus :)

3995ce874484865220e37ea301cc8cd6?s=200&r=pg&d=mm
charguie, 13-02-2012 00:13:14 - Répondre

Merci pour le tuto, petit détail, la page de démonstration ne fonctionne plus car le css appelé renvoie une 404 :

http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css

E55bc95c5954ddeaa32219b5bdc9cb2f?s=200&r=pg&d=mm
tonton, 07-02-2012 17:28:53 - Répondre

Twitter Bootstrap 2.0 est une réecriture complete avec modification des class et suppression de certaine.

F1bdccec0b0edc46de100caa2b77a051?s=200&r=pg&d=mm
deltackro, 05-02-2012 15:44:19 - Répondre

github n'heberge plus le bootstrap ?
Ta page apparait sans CSS du tout :/

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Mehdi, 02-02-2012 21:18:05 - Répondre

Franchement Merci !!
Je viens de recevoir un projet à intégrer et on m'a exigé d'utiliser le Bootstrap et le LESS je me sentais un peu perdu :D
Merci :)

A6c7652eedb29b83c86a360971b4f441?s=200&r=pg&d=mm
Corentin, 01-02-2012 10:26:17 - Répondre

Ah grosse mise a jour faut changer la plupart des div --' est le css est plus d’accès a distance comme avant sniff

50830f4d4be229b0d71beb5c4b3bdf9e?s=200&r=pg&d=mm
Gp2mv3, 27-01-2012 22:48:23 - Répondre

Très très bon tutoriel. ;)

F1bdccec0b0edc46de100caa2b77a051?s=200&r=pg&d=mm
deltackro, 26-01-2012 02:35:29 - Répondre

Super tuto, comme toujours :)
En passant, pourrais-je savoir quel plugin tu utilises pour incruster facilement des balises avant et après le code que tu selectione?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Wonderfoule, 17-01-2012 16:52:33 - Répondre

…et soudain tout devient clair !! Belle démo.

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
ceednee, 13-01-2012 18:39:42 - Répondre

Excellent article.
Merci d'avoir partager toutes tes connaissances sur ce bootstrap

9d5c2e32bf8c7760f4e4b016d50ca0eb?s=200&r=pg&d=mm
Julien_xD, 07-01-2012 07:13:47 - Répondre

Utile et Pratique !

A09f139e2fef1d3ed686d96ba4c059dd?s=200&r=pg&d=mm
leo, 09-12-2011 23:19:29 - Répondre

Tutorial bien sympa! Beau boulot!

Tu utilises quel snipet pour que li*3 soit complété en 3 li ? :) Avec la version de base de SublimeText2 ça ne semble pas fonctionner... Merci :)

F1bdccec0b0edc46de100caa2b77a051?s=200&r=pg&d=mm
deltackro, 26-01-2012 02:36:10 - Répondre

C'est le plugin Zen-coding

4eccfb6c9c8d5205568878859c604922?s=200&r=pg&d=mm
Rechart, 06-12-2011 16:13:36 - Répondre

Bonjour,

Il y avait pas de progress-bar avant ??

076307256f69beba8696b6946937e1a1?s=200&r=pg&d=mm
Cristof, 11-11-2011 13:50:39 - Répondre

Un merci pour cette découverte !!!
pour infos il est version 1.4

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
jm.ch73, 20-10-2011 16:21:42 - Répondre

bonjour a tous
j'ai un souci de liens avec le nav secondary-nav quand je clic dessus rien ne se passe
je suis novice et j'ai beau cherché je ne trouve pas
merci de votre aide
en tout cas tip top les tutos

8f94a027605d8e5b99558c7fa3d58fa2?s=200&r=pg&d=mm
Titirobiss, 14-10-2011 16:46:04 - Répondre

Très bon tuto

Pris en flag sur le bouton de "soumission" lol

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Oliver, 13-10-2011 21:18:15 - Répondre

Super tuto !!! merci beaucoup à GrafikArt !!! Ne vous arretez surtout pas les gars car vous êtes très bon ! Encore merci !

E32a8d271c96b6a21533ef88df2ecad5?s=200&r=pg&d=mm
deef21, 10-10-2011 17:16:35 - Répondre

Bonjour
J'essaye actuellement d'utiliser le bootstrap Twitter en déployant les sources .less avec le fichier less.js

Voici que j'ai mis:<link rel="stylesheet/less" href="/cake/pages/bootstrap.less">
<script type="text/javascript" src="/cake/js/less.js"></script>

Le site ne prend pas en compte les changements.... est ce qu vous avez une idée?

Fdd05edcd2b5c9eb95d560e35f20a363?s=200&r=pg&d=mm
Flohw, 05-10-2011 11:05:48 - Répondre

pour les images avec le bootstrap, y'a une section "Medias" sur la doc ;)

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Radu, 29-09-2011 19:38:37 - Répondre

Quel galère à intégrer avec CakePHP (surtout au niveau des formulaires), quelqu'un a déjà essayé de le faire ?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Radu, 30-09-2011 02:07:47 - Répondre

Bon aller je me répond à moi même et ça peut toujours être utile pour ceux qui voudront essayer:

on peut automatiser un peut les chose en créeant un app_controller.php sur /app:

class AppController extends Controller{

function beforeRender(){

//Options de formulaire "Bootstrap CSS Twitter"
$options = array(
'inputDefaults' => array(
'div' => array(
'class' => 'clearfix'
),
'between' => '<div class="input">',
'after' => '</div>'
)
);
$this->set('formOptions', $options);
}
}

ensuite lorsqu'on crée le formulaire:

<?php echo $this->Form->create('Inscription', $formOptions); ?>

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
bad2climb, 27-09-2011 00:56:32 - Répondre

Merci pour ce tuto ! Ce bootstapp est génial !!

744dfc17b9920cc8774aaef7843ec841?s=200&r=pg&d=mm
Kocal, 21-09-2011 18:22:13 - Répondre

Ahah, excellent le coup du "Dora l'exploratrice!", je me suis trompé x(

6966cbb376e1c610817b399506fb1f91?s=200&r=pg&d=mm
HlB, 21-09-2011 16:30:13 - Répondre

la vidéo ne s'affiche plus

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Mikachu, 17-09-2011 00:15:11 - Répondre

maxlayer44 merci pour l info :)

10031
maxslayer44, 16-09-2011 23:42:49 - Répondre

Sinon, suffit d'aller sur le site de Bootstrap, ils viennent de publier les JS qui vont avec.

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
dav, 15-09-2011 19:39:33 - Répondre

well done

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Mikachu, 15-09-2011 17:16:41 - Répondre

Pour les flemards:
Avoir le drop-menu en ajax

<script type="text/javascript">
$(function() {
$(".menu").click(function() {
$(".menu-dropdown").toggle("slow");
});
});
</script>

59f2bb944b55b38fd40f78d50cbbcd8c?s=200&r=pg&d=mm
sebastien.ego, 15-09-2011 17:12:19 - Répondre

Très bon tutoriel comme d'habitude ! Bootstrap CSS est magique ! Merci encore

0114a06274ee442d98037eefe7eb4d99?s=200&r=pg&d=mm
siriu, 14-09-2011 18:18:57 - Répondre

He pense qu'il est concevable pour s'en servir comme base pour son propre design non ?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Huviel, 14-09-2011 14:11:04 - Répondre

Salut,

Est-ce qu'il existe une doc précise et détaillé pour apprendre à se servir du bootstrap ou bien est-ce qu'on doit mettre la main dans le code et inspecter chaque élément pour voir la façon dont il est constitué ?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
GSanctussy, 14-09-2011 09:54:47 - Répondre

Salut Grafikart c'est vraiment un très bon tutoriel ! Bon boulot !!
J'aimerais savoir s'il est possible de coupler ce boostrap avec un framework de gestion de position tel que Gantry ?
Cordialement

A1966791d290154a5915fe84422b5752?s=200&r=pg&d=mm
Jerry Wham, 14-09-2011 04:50:40 - Répondre

Si js est désactivé, est-ce que les css fonctionnent vu que c'est de less ? (Je pose la question car je ne connais pas le less).

Sinon, c'est puissant comme système et malgré la multiplication des div, plus sémantique que les grilles standard comme 960s ou blueprint.

A1966791d290154a5915fe84422b5752?s=200&r=pg&d=mm
Jerry Wham, 18-09-2011 17:14:22 - Répondre

Je réponds moi-même à ma question pour ceux que ça intéresse. Il y a un lien sur le site de boostrap qui permet de convertir les fichiers less en css.

6c97cab4a459054095270e253d6d71b5?s=200&r=pg&d=mm
Kaginics, 14-09-2011 00:17:04 - Répondre

Bon tuto comme d'hab continuez (j'ai bien aimé la référence : dora ^^)

93401159cdd795339ad56226183ad417?s=200&r=pg&d=mm
freepostpas, 13-09-2011 21:56:12 - Répondre

Super tuto. Sinon, auriez vous un lien permettant d'apprendre à faire un système pour le menu dropdown ? Je suis tout débutant en JS, et je voudrais savoir si tous les dropdown sont compatible avec ce menu ? En faites la fonction js ne fait que changer le display:none; en display: block; avec une transition, ou bien c'est tout autre chose ?

Merci.

36cbbc8c8729818f46ad74254177530c?s=200&r=pg&d=mm
snollito, 13-09-2011 20:46:11 - Répondre

Désolé pour le double post, je pensais surtout à des fins professionnelles ^^

36cbbc8c8729818f46ad74254177530c?s=200&r=pg&d=mm
snollito, 13-09-2011 20:44:10 - Répondre

Peut-on utiliser le Bootstrap Twitter à des fins commerciales?

1be60808049b010c4ca8510730d52086?s=200&r=pg&d=mm
Rtransat, 13-09-2011 17:57:02 - Répondre

Dommage lors d'un ajout de formulaire dans hero-unit que celui ci ne soit pas tout à gauche ^^

12081
oussamabk, 13-09-2011 17:52:35 - Répondre

Excellente découverte! ça fait énormément gagner du temps.
Merci Grafikart ^_^

F39de96fdbf7ceda1df10480efbd49df?s=200&r=pg&d=mm
Hotgeart, 13-09-2011 16:55:12 - Répondre

merci j'en cherchais justement

23a04ebde70a21e4a80d465b1836824d?s=200&r=pg&d=mm
FreePostPas, 13-09-2011 15:43:06 - Répondre

Super, penses tu faire un article sur Sublime Text 2 ? En tous cas comme d'hab, super.

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
romain25, 13-09-2011 17:59:36 - Répondre

http://www.grafikart.fr/tutoriels/sublime-text-2/sublime-text-2-180

0a4e0ae19e4d5200e65ae84206ac7035?s=200&r=pg&d=mm
zooper, 13-09-2011 14:48:10 - Répondre

Très bon tutoriel, tu as su dans le temps aller à l'essentiel et surtout merci pour tout.
Bonne continuation

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Mikachu, 13-09-2011 13:36:12 - Répondre

Génial comme d'hab... Je suis tombé dessus par hasard il y a 3 jours de ça...

En regardant la vidéo, je t'ai bcp entendu dire:" blabla html5...html5, etc..." . Du coup je me demandais si c'etait dans ton optique de faire un mini tuto sur les nouveautés du html5.... les plus, les moins ???

En tout PERFECT bootstrap :)

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
ryodo, 13-09-2011 13:28:26 - Répondre

Merci beaucoup pour le tuto intéressant ,Mais vous avez oublier Cakephp :s

1be60808049b010c4ca8510730d52086?s=200&r=pg&d=mm
Rtransat, 13-09-2011 12:33:03 - Répondre

Très bon tuto, je ne connaissais pas ;).
Par contre quel est ton thème windows ? car Sublime Text chez moi j'ai le menu de base et ça fait vraiment laid :/

Continue comme ça en tout cas :). Vivement les tutos sur le mini CMS ;)

744dfc17b9920cc8774aaef7843ec841?s=200&r=pg&d=mm
Kocal, 21-09-2011 15:45:30 - Répondre

Il a fait une présentation/tuto de Sublim Text 2.

4000ce303cc94d538f2b83c99c9aee0a?s=200&r=pg&d=mm
David Aparicio, 13-09-2011 11:29:23 - Répondre

Très bon tuto ! Moi, qui me tâtais sur l'utilisation de ce CSS ;)

1e9234c94b99d3fee4c8bac6a801e020?s=200&r=pg&d=mm
larube, 13-09-2011 01:38:14 - Répondre

Beaucoup de tutos dernièrement !! Merci encore et encore ! Je mate ça maintenant !!!