Alpha13 Il y a 22 jours Répondre
Très bon tutoriel, merci beaucoup !
Dans ce tutoriel vidéo je vous propose de découvrir le Bootstrap Twitter. Ce kit CSS vous permettra de commencer vos projet web avec une base CSS solide en attendant de créer votre propre feuille de style CSS.
Après avoir appris sur Internet quoi de plus normal que de partager à son tour ? Passionné par le web depuis un peu plus de 5 ans maintenant j'aime partager mes compétences et mes découvertes avec les personnes qui ont cette même passion pour le web : Vous.
Alpha13 Il y a 22 jours Répondre
Très bon tutoriel, merci beaucoup !
sebastien Il y a 22 jours Répondre
c'est quoi le logiciel que tu utilises pour ecrire le code html dans le tuto ?
jo.calen Il y a 25 jours 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....
substances Il y a 30 jours 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" ?? :-(
Bruno Il y a 30 jours - 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
charaf Il y a 1 mois Répondre
oui le css est mort après la sortie de la nouvelle version de bootstrap v2
Bruno Il y a 1 mois 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
galadiel Il y a 1 mois 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 ;-)
unicolored Il y a 1 mois Répondre
Merci pour ce super tuto !
dready Il y a 1 mois 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
Hoki Il y a 1 mois 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.
Lucoulouz Il y a 2 mois 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,
tcit Il y a 2 mois Répondre
Le CSS de l'exemple est mort :-(
switcherdav Il y a 2 mois 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 !
tiboc77 Il y a 2 mois 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
sawy Il y a 3 mois 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
Dijix12 Il y a 3 mois 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
charguie Il y a 3 mois 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
tonton Il y a 3 mois Répondre
Twitter Bootstrap 2.0 est une réecriture complete avec modification des class et suppression de certaine.
deltackro Il y a 3 mois Répondre
github n'heberge plus le bootstrap ?
Ta page apparait sans CSS du tout :/
Mehdi Il y a 3 mois 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
Corentin Il y a 3 mois 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
Gp2mv3 Il y a 4 mois Répondre
Très très bon tutoriel.
deltackro Il y a 4 mois 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?
Wonderfoule Il y a 4 mois Répondre
…et soudain tout devient clair !! Belle démo.
ceednee Il y a 4 mois Répondre
Excellent article.
Merci d'avoir partager toutes tes connaissances sur ce bootstrap
Julien_xD Il y a 4 mois Répondre
Utile et Pratique !
leo Il y a 5 mois 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
deltackro Il y a 4 mois - Répondre
C'est le plugin Zen-coding
Rechart Il y a 5 mois Répondre
Bonjour,
Il y avait pas de progress-bar avant ??
Cristof Il y a 6 mois Répondre
Un merci pour cette découverte !!!
pour infos il est version 1.4
jm.ch73 Il y a 7 mois 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
Titirobiss Il y a 7 mois Répondre
Très bon tuto
Pris en flag sur le bouton de "soumission" lol
Oliver Il y a 7 mois Répondre
Super tuto !!! merci beaucoup à GrafikArt !!! Ne vous arretez surtout pas les gars car vous êtes très bon ! Encore merci !
deef21 Il y a 7 mois 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?
Flohw Il y a 7 mois Répondre
pour les images avec le bootstrap, y'a une section "Medias" sur la doc
Radu Il y a 8 mois Répondre
Quel galère à intégrer avec CakePHP (surtout au niveau des formulaires), quelqu'un a déjà essayé de le faire ?
Radu Il y a 8 mois - 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); ?>
bad2climb Il y a 8 mois Répondre
Merci pour ce tuto ! Ce bootstapp est génial !!
Kocal Il y a 8 mois Répondre
Ahah, excellent le coup du "Dora l'exploratrice!", je me suis trompé x(
HlB Il y a 8 mois Répondre
la vidéo ne s'affiche plus
Mikachu Il y a 8 mois Répondre
maxlayer44 merci pour l info
maxslayer44 Il y a 8 mois Répondre
Sinon, suffit d'aller sur le site de Bootstrap, ils viennent de publier les JS qui vont avec.
dav Il y a 8 mois Répondre
well done
Mikachu Il y a 8 mois Répondre
Pour les flemards:
Avoir le drop-menu en ajax
<script type="text/javascript">
$(function() {
$(".menu").click(function() {
$(".menu-dropdown").toggle("slow");
});
});
</script>
sebastien.ego Il y a 8 mois Répondre
Très bon tutoriel comme d'habitude ! Bootstrap CSS est magique ! Merci encore
siriu Il y a 8 mois Répondre
He pense qu'il est concevable pour s'en servir comme base pour son propre design non ?
Huviel Il y a 8 mois 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é ?
GSanctussy Il y a 8 mois 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
Jerry Wham Il y a 8 mois 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.
Jerry Wham Il y a 8 mois - 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.
magicvince76650 Il y a 8 mois Répondre
Bon tuto comme d'hab continuez (j'ai bien aimé la référence : dora ^^)
freepostpas Il y a 8 mois 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.
snollito Il y a 8 mois Répondre
Désolé pour le double post, je pensais surtout à des fins professionnelles ^^
snollito Il y a 8 mois Répondre
Peut-on utiliser le Bootstrap Twitter à des fins commerciales?
Rtransat Il y a 8 mois Répondre
Dommage lors d'un ajout de formulaire dans hero-unit que celui ci ne soit pas tout à gauche ^^
oussamabk Il y a 8 mois Répondre
Excellente découverte! ça fait énormément gagner du temps.
Merci Grafikart ^_^
Hotgeart Il y a 8 mois Répondre
merci j'en cherchais justement
FreePostPas Il y a 8 mois Répondre
Super, penses tu faire un article sur Sublime Text 2 ? En tous cas comme d'hab, super.
romain25 Il y a 8 mois - Répondre
http://www.grafikart.fr/tutoriels/sublime-text-2/sublime-text-2-180
zooper Il y a 8 mois Répondre
Très bon tutoriel, tu as su dans le temps aller à l'essentiel et surtout merci pour tout.
Bonne continuation
Mikachu Il y a 8 mois 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
ryodo Il y a 8 mois Répondre
Merci beaucoup pour le tuto intéressant ,Mais vous avez oublier Cakephp :s
Rtransat Il y a 8 mois 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
Kocal Il y a 8 mois - Répondre
Il a fait une présentation/tuto de Sublim Text 2.
David Aparicio Il y a 8 mois Répondre
Très bon tuto ! Moi, qui me tâtais sur l'utilisation de ce CSS
larube Il y a 8 mois Répondre
Beaucoup de tutos dernièrement !! Merci encore et encore ! Je mate ça maintenant !!!
Auberland Il y a 24 heures Répondre
Merci beaucoup pour ce magnifique tuto, très bien expliquer; bravo