Tutoriel Vidéo HTML-CSS : Bootstrap CSS from Twitter

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.

Démonstration


Télécharger la vidéo
(Réservé aux premiums)


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.

Vous aimerez aussi

Un effet 3D avec le CSS3

Un effet 3D avec le CSS3
6m

Dans ce tutoriel CSS3, nous allons apprendre comment simuler un effet...

Créer un site "One Page"

Créer un site "One Page"
1h23

Premier vrai tutoriel sur l'intégration d'une maquette HTML & CSS,de...

62 commentaires
Ajouter un commentaire

Auberland Il y a 24 heures Répondre

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

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.

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 !!!

Laisser un commentaire

Si vous avez une question il est conseillé d'utiliser le forum si vous voulez une réponse sûre.