Scribd
Importer
43 vues3 pages

Bootstrap 1

Le document décrit l'utilisation de la grille Bootstrap pour la mise en page de sites web. Il présente des exercices visant à appliquer les concepts de grille à travers des exemples d'interfaces.

Transféré par

Arij Chouchene
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
43 vues3 pages

Bootstrap 1

Le document décrit l'utilisation de la grille Bootstrap pour la mise en page de sites web. Il présente des exercices visant à appliquer les concepts de grille à travers des exemples d'interfaces.

Transféré par

Arij Chouchene
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 3

TP - 1- Bootstrap

La grille

Objectifs
o Créer rapidement une mise en page flexible et responsive avec le système de grille.

Rappels
 Le système de grille Bootstrap 5 est utilisé pour des mises en page réactives.
 Il est important que vous compreniez comment utiliser la grille avant de découvrir tout
autre composant Bootstrap 5, car quel que soit l’élément que vous utilisez, vous devrez le
placer quelque part sur l’écran.
 Un conteneur Bootstrap 5 est un élément de la classe .container. Le conteneur est la
racine du système de grille Bootstrap 5 et il est utilisé pour contrôler la largeur de la
disposition.
 Le conteneur Bootstrap 5 contient tous les éléments d’une page. Cela signifie que votre
page doit avoir la structure suivante: d’abord le corps de la page HTML, à l’intérieur de
celle-ci, vous devez ajouter le conteneur et tous les autres éléments à l’intérieur du
conteneur.

<body>
<div class="container">
.............
................
</div>
</body>

1. Exercice 01
Pour vous entraîner et vous appliquez ce qu’on a vue dans le cours, je vous propose
d’utiliser la grille de Bootstrap pour obtenir le résultat visible aux figures suivantes.

Figure 1

Figure 2
2. Exercice 02
Réaliser le code html qui vous permet d’obtenir le résultat visible aux schémas
suivants.

Figure 3

3. Exercice 03
En utilisant la grille de Bootstrap, réaliser le code html qui vous permet d’obtenir le
résultat visible aux schémas suivants.

 Principes
 Le header est une ligne (row), sur 12 colonnes. Idem pour le footer.

 On définit une ligne (row) qui contiendra le menu (nav) sur 2 colonnes, et la section sur
10 colonnes.

 Dans la section, on définit une ligne qui contient les six articles sur 10 colonnes, et deux
colonnes pour les asides.

 Dans la section, on définit une ligne qui contient les huit articles sur 12 colonnes.

Vous aimerez peut-être aussi