Correction TP la grille Bootstrap Ex01

Correction TP la grille Bootstrap Ex01

  1. Objectifs

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

    • Énoncé



    • Solution
      • Fichier CSS

          body{
            padding-top: 10px;
          }
          [class*="col-"] {
            background-color: #90e3ee;
            border: 2px solid #2b09ee;
            border-radius: 6px;
            line-height: 50px;
            text-align: center;
          }
          

        schémas01 : HTML

          <!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">
                <link href="style.css" rel="stylesheet">
             </head>
             <body>
                <div class="container">
                   <div class="row">
                      <div class="col-lg-8">
                         8 colonnes
                         <div class="row">
                            <div class="col-lg-3">3 colonnes</div>
                            <div class="col-lg-6">6 colonnes</div>
                            <div class="col-lg-3">3 colonnes</div>
                         </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 : HTML

          
          ...........
           <div class="col-lg-4">
                         4 colonnes
                      </div>
          ................
          

        schémas03 : HTML

          <!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">
                <link href="style.css" rel="stylesheet">
             </head>
             <body>
                <div class="container">
                   <div class="row">
                      <div class="col-md-12">Premier niveau avec 12 colonnes
                         <div class="row">
                            <div class="col-md-8">Second niveau avec 8 colonnes
                               <div class="row">
                                  <div class="col-md-4">Troisième niveau avec 4 colonnes</div>
                                  <div class="col-md-6 col-md-offset-2">Troisième niveau avec 6 colonnes
                                     <div class="row">
                                        <div class="col-md-3 col-md-offset-1">Quatrième niveau avec 3 colonnes</div>
                                        <div class="col-md-5 col-md-offset-1">Quatrième niveau avec 5 colonnes</div>
                                     </div>
                                  </div>
                               </div>
                            </div>
                            <div class="col-md-4">Second niveau avec 4 colonnes</div>
                         </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>
          



  3. Exercice 05

    • Énoncé
    • Solution
      • <!DOCTYPE html>
        <html>
           <head>
              <meta charset="utf-8">
              <title>Grid Example</title>
              <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
              <style>                         
         /* Style pour l' exemple */
        section.col-sm-8,section.col-sm-10,article.col-sm-6, 
        nav.col-sm-2,div.col-sm-12,div.col-sm-10,div.col-sm-2,aside{
        line-height : 60px ;
        background-color: bisque;
        border : 1px solid red;
        border-radius: 4px;
        margin:0px;
        }
        </style>
        </head>
        <body>
        <div class ="container">
        <header class="row">
            <div class="col-sm-12">
                        Entete
            </div>
        </header >
        <div class ="row justify-content-end">
           <nav class ="col-sm-2">
                   Menu
           </nav>
           <section class ="col-sm-10">
                       Section
                <div class ="row">
                   <div class ="col-sm-10">
                            <div class ="row">
                           <article class ="col-sm-6">
                                           Article
                           </article>
                           <article class ="col-sm-6">
                                           Article
                           </article>
                           <article class ="col-sm-6">
                                           Article
                           </article>
                           <article class ="col-sm-6">
                                           Article
                           </article>
                           <article class ="col-sm-6">
                                           Article
                           </article>
                           <article class ="col-sm-6">
                                           Article
                           </article>
                       </div>             
                   </div>
                   <div class="col-sm-2">
                    <div class ="row">
                        <aside class="col-sm-12">
                               Aside 1
                           </aside>
                           <aside class="col-sm-12">
                               Aside 2
                           </aside>
                    </div>
                   </div>
               </div>
           </section>
           <section class="col-sm-10">
                   Section
                   <div class ="row">
                   <div class ="col-sm-12">         
                       <div class ="row">
                           <article class ="col-sm-6">
                                           Article
                           </article>
                           <article class ="col-sm-6">
                                           Article
                           </article>
                           <article class ="col-sm-6">
                                           Article
                           </article>
                           <article class ="col-sm-6">
                                           Article
                           </article>
                           <article class ="col-sm-6">
                                           Article
                           </article>
                           <article class ="col-sm-6">
                                           Article
                           </article>
                       </div>
                       </div>
                   </div>
           </section>
         </div>
         <footer class ="row">
                <div class ="col-sm-12">
                Pied de page
                </div>
         </footer >
        </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