CATALOGUE Code & Data Formation Bootstrap Apprendre Bootstrap - Le Framework Front-End

Comprendre et utiliser la grille de Bootstrap Twitter

Retour à la formation
Chapitre 2 Leçon 1
Précédent
Suivant

Cette vidéo explique en détail comment fonctionne la grille de Bootstrap, un système de 12 colonnes pour structurer votre site.

Détails de la leçon

Description de la leçon

Dans cette vidéo, nous explorons le système de grille du Bootstrap Twitter, un outil puissant pour structurer vos éléments sur une page web. La grille de Bootstrap est basée sur un système de 12 colonnes, permettant de placer vos éléments sur le nombre de colonnes désiré. Par exemple, pour deux éléments côte à côte représentant chacun 50% de la largeur de la page, il suffit de leur attribuer une classe col-md-6, chaque chiffre indiquant le nombre de colonnes à occuper. Nous abordons également le concept de container, utilisé pour centrer et délimiter les contenus du site avec une largeur définie à 1170 pixels par défaut. Découvrez comment ajouter du CSS pour visualiser cette structure et voyez comment créer des lignes et des colonnes à l'intérieur de votre conteneur. De plus, nous démontrons comment les colonnes se comportent en version mobile, permettant un responsive design facile et efficace. Enfin, nous ajoutons des exemples de colonnes imbriquées pour illustrer la flexibilité de ce système.

Objectifs de cette leçon

Les objectifs de cette vidéo sont:
1. Comprendre le fonctionnement des colonnes dans Bootstrap.
2. Savoir utiliser des containers et des rows.
3. Mettre en place un design responsive avec Bootstrap.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en HTML et CSS.

Métiers concernés

Les professionnels travaillant en développement web front-end, les designers web, et les intégrateurs web pourront particulièrement bénéficier de cette vidéo pour optimiser la structure de leurs sites.

Alternatives et ressources

Des alternatives à Bootstrap pourraient inclure les frameworks CSS tels que Foundation, Bulma, ou Tailwind CSS.

Questions & Réponses

Une classe container est utilisée pour centrer et définir la largeur maximale des éléments sur une page, en ajoutant des margins automatiques à droite et à gauche.
Utilisez la classe col-md-6 pour chaque élément, ce qui signifie qu'ils occuperont chacun 6 colonnes sur les 12 disponibles.
Les éléments excédant les 12 colonnes passeront automatiquement à la ligne suivante.