• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Implémentez votre structure de pages

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans le chapitre précédent, vous avez vu comment une page peut être décomposée en sections d'en-tête, de pied de page et de contenu.

Maintenant que vous avez un bon aperçu de la manière dont vous allez implémenter la structure de vos pages, il est temps de les créer !

Découvrez les conteneurs

Commençons par l'élément de mise en page le plus basique dans Bootstrap, le conteneur. Envelopper vos contenus dans un élément   <div>  avec la classe   .container  permet de centrer votre contenu à l’écran en y ajoutant des marges horizontales automatiques. De ce fait, la classe  .container  permet d’aérer la lecture horizontale du contenu de votre site web.

<div class="container">
<!-- Ici notre contenu →
</div>

 Si vous voulez que le contenu occupe toujours 100 % de la largeur de l’écran, vous pouvez utiliser la classe   .container-fluid   à la place. Cela permet d’enlever les marges horizontales appliquées par défaut par le framework.

Entraînez-vous !

Console de code
Houston... ?
Il semblerait que votre ordinateur ne soit pas connecté à Internet.
Vous n'êtes pas connecté

Connectez-vous pour accéder aux exercices de codes et testez vos nouvelles compétences.

Pensez à vous entraîner avant de terminer ce chapitre.

Maîtrisez les grilles de Bootstrap

Bootstrap 4 possède un système de grille puissant et flexible qui permet de créer tous les types de mise en page. Cette grille utilise une série de lignes et de colonnes pour mettre en page le contenu. Une ligne permet d’envelopper une ou plusieurs colonnes qui intègrent du contenu.

OK, mais qu’est-ce que ça veut dire, en pratique ? 

Imbrication des éléments de la grille de Bootstrap 4
Imbrication des éléments de la grille de Bootstrap 4

Un élément  <div>  de ligne est déclaré en lui attribuant une classe  .row. Pour chaque colonne de la ligne, un élément  <div>  enfant du  <div>  de ligne doit se voir attribuer l'une des classes de colonnes de Bootstrap 4. La première de ces classes de colonnes est la classe  .col.

Examinons cet extrait de code :

<div class="container">
<div class="row">
<div class="col">
Première colonne
</div>
<div class="col">
Deuxième colonne
</div>
</div>
</div>

Vous remarquez qu'il y a un élément  <div>  parent  .row   enveloppant deux  <div> enfants   .col. Bootstrap possède une grille à 12 colonnes. Dans ce cas précis, Bootstrap attribuera automatiquement la moitié des colonnes à chacun des éléments  <div>  de classe  .col, donnant alors une largeur de 6 colonnes par  <div>. En d'autres termes, cela représente la moitié de la largeur de la ligne. De ce fait, Bootstrap divisera systématiquement les 12 colonnes de manière égale entre les éléments  <div> qui ont la classe  .col.

Entraînez-vous

Console de code
Houston... ?
Il semblerait que votre ordinateur ne soit pas connecté à Internet.
Vous n'êtes pas connecté

Connectez-vous pour accéder aux exercices de codes et testez vos nouvelles compétences.

Pensez à vous entraîner avant de terminer ce chapitre.

Mais, et si je veux indiquer explicitement le nombre de colonnes à la place de Bootstrap ? 

Par exemple, vous pouvez avoir une mise en page qui ne possède pas de colonnes de taille égale. Supposons que vous disposiez d'une ligne, que vous vouliez qu'une colonne de cette ligne occupe deux tiers de sa largeur, et qu'une autre colonne occupe le tiers restant.

Dans ce cas, en tenant compte du fait qu'une ligne de la grille de Bootstrap peut être divisée en un maximum de 12 colonnes, vous voulez que l'un des  <div> .col  occupe huit colonnes, et que l'autre occupe quatre colonnes. Pour ce faire, ajoutez chacun de ces nombres à la classe  .col  correspondante, comme indiqué dans cet extrait :

<div class="container">
<div class="row">
<div class="col-8">
Première colonne
</div>
<div class="col-4">
Deuxième colonne
</div>
</div>
</div>

Entraînez-vous !

Console de code
Houston... ?
Il semblerait que votre ordinateur ne soit pas connecté à Internet.
Vous n'êtes pas connecté

Connectez-vous pour accéder aux exercices de codes et testez vos nouvelles compétences.

Pensez à vous entraîner avant de terminer ce chapitre.

Désormais, vous devez être prêt à mettre en pratique ce que vous avez appris pour le site de l'école d’informatique (Info School).

Conception de la page d'accueil pour de grands écrans
Conception de la page d'accueil pour de grands écrans

Si vous examinez l’image de la conception de la page d'accueil pour de grands écrans ci-dessus, vous reconnaîtrez les trois sections principales du chapitre précédent, à savoir l'en-tête contenant la navigation, la zone de contenu et le pied de page.

Pour décomposer un peu plus cette page, la section de contenu comprend deux lignes :

  • une ligne qui contient la section hero (la section promotionnelle en haut de la page avec la grande image) ;

  • une ligne qui contient les trois cartes d'information.

L'image suivante illustre la décomposition de la mise en page initiale que vous devez implémenter :

Mise en page de la grille de la page d'accueil
Mise en page de la grille de la page d'accueil

Nous allons commencer à créer notre site, que nous développerons tout au long de ce cours.

Afin de débuter l’exercice dans les meilleures conditions, je vous recommande d’utiliser le “starter template” de Bootstrap ci-dessous, comprenant une structure HTML de base avec les balises <html>, <head>, <body>, ainsi que les ressources externes telles que la feuille de style CSS ou les différents fichiers JavaScript.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Pour vous exercer, insérez un texte de remplacement dans chaque colonne pour l'instant (par exemple, EN-TÊTE, SECTION HERO, CARTE D'INFORMATION et PIED DE PAGE).

Vous pouvez commencer en vous aidant de la trame suivante :

div class="container">
<div class="row">
<div class="col">
HEADER
</div>
</div>
<div class="row">
...
</div>
<div class="row">
...
</div>
<div class="row">
...
</div>
</div>

Une fois que vous avez testé vous-même, vous pouvez vérifier votre travail dans le fichier index.html du dossier partie-2/chapitre-2/grille dans le dépôt GitHub de l'exemple de site.

En résumé

  • Les classes de conteneur, ligne et colonne nécessitent une hiérarchie spécifique lors de la création d'une grille dans Bootstrap 4.

  • La grille de Bootstrap est une grille à 12 colonnes.

  • Utilisez les variations des classes de colonnes pour choisir entre les calculs automatiques de la largeur des colonnes du framework et les largeurs de colonnes explicites.

Maintenant que vous avez appris à implémenter la structure de la page d'accueil à l'aide de la grille de Bootstrap, vous êtes prêt à apprendre à la rendre responsive en fonction des tailles d'écran.

Exemple de certificat de réussite
Exemple de certificat de réussite