Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
CSS

Correction TP la grille Bootstrap Ex02

Un cours complet pour maîtriser Correction TP la grille Bootstrap Ex02.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
CSS Historique et versions
Les sélecteurs simples en CSS
Structure et règles CSS
Exercices en CSS les sélecteurs Série 01
Test d'évaluation en CSS3 sous forme de QCM
Présentation du CSS3
Exercices en CSS les sélecteurs Série 02
Intégrer du CSS dans une page html
Exercices en CSS les sélecteurs Série 03
Le positionnement des éléments
Les balises de bloc et les balises en-ligne
Notion de flux en CSS
Notion de modèle de boîte CSS
Les Marges en CSS
Unités de dimension en CSS
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectifs

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

  2. Exercice 02

    1. Énoncé
    2. Solution
        schémas01 
      <!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset="utf-8">
      <title>Exemple d'une grille</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<style>
.panel {
    border: 2px solid #0087FF;
    background-color: #DDEDFF;
    color: #0087FF;
  border-radius: 0.3rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.color2{background-color: #DECDFE;
    color: #A88FE0;
border: 2px solid #A88FE0;}
.color3{background-color: #FCD2E5;
    color: #DA9CAD;
border: 2px solid #DA9CAD;}
</style>
   </head>
   <body>
        <div class="container pt-4">
                <div class="row">
                  <div class="col">
                    <div class="panel">Ceci est une seule colonne.</div>
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="panel color2">Ceci est la première colonne.</div>
                  </div>
                   <div class="col">
                     <div class="panel color2" >Ceci est la deuxième colonne.</div>
                   </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="panel color3">Ceci est la première colonne.</div>
                  </div>
                   <div class="col">
                     <div class="panel  color3">Ceci est la deuxième colonne.</div>
                   </div>
                  <div class="col">
                    <div class="panel  color3">Ceci est la troisième colonne.</div>
                  </div>
                   <div class="col">
                     <div class="panel color3">Ceci est la quatrième colonne.</div>
                   </div>
                </div>   
              </div>    
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
              </body>
           </html>
      schémas02 
      <!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset="utf-8">
      <title>Exemple d'une grille</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<style>
.panel {
    border: 1px solid #0087FF;
    background-color: #DDEDFF;
    color: #0087FF;
  border-radius: 0.3rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
</style>
   </head>
   <body>
        <div class="container pt-4">
                <div class="row">
                  <div class="col">
                    <div class="panel">Ceci est une seule colonne.</div>
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="panel">Ceci est la première colonne.</div>
                  </div>
                   <div class="col">
                     <div class="panel">Ceci est la deuxième colonne.</div>
                   </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="panel ">Ceci est la première colonne.</div>
                  </div>
                   <div class="col">
                     <div class="panel ">Ceci est la deuxième colonne.</div>
                   </div>
                  <div class="col">
                    <div class="panel ">Ceci est la troisième colonne.</div>
                  </div>
                   <div class="col">
                     <div class="panel">Ceci est la quatrième colonne.</div>
                   </div>
                </div>                
                <div class="row">
                        <div class="col">
                          <div class="panel ">1 colonne.</div>
                        </div>
                         <div class="col">
                           <div class="panel ">2 colonne.</div>
                         </div>
                        <div class="col">
                          <div class="panel ">3 colonne.</div>
                        </div>
                         <div class="col">
                           <div class="panel">4 colonne.</div>
                         </div>
                         <div class="col">
                                <div class="panel ">5 colonne.</div>
                              </div>
                               <div class="col">
                                 <div class="panel ">6 colonne.</div>
                               </div>
                              <div class="col">
                                <div class="panel ">7 colonne.</div>
                              </div>
                               <div class="col">
                                 <div class="panel">8 colonne.</div>
                               </div>
                      </div>
              </div>    
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
              </body>
           </html>