Correction TP la grille Bootstrap Ex02

Correction TP la grille Bootstrap Ex02

  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>
          



Abonnez vous à notre chaîne YouTube gratuitement