Correction TP la grille Bootstrap Ex05

Correction TP la grille Bootstrap Ex05

  1. Objectifs

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

    1. Énoncé



    2. Solution
      • <!DOCTYPE html>
        <html>
           <head>
              <meta charset="utf-8">
              <title>Grid Example</title>
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
           </body>
        </html>



Abonnez vous à notre chaîne YouTube gratuitement