Correction TP2 la grille Bootstrap Ex01

Correction TP2 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

    1. Énoncé



    2. Solution HTML
      • <!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">
            <link href="assets/css/bootstrap.css" rel="stylesheet">
            <link href="style.css" rel="stylesheet">
          </head>
          <body>
              <div class="container">
                  <header class="row">
                    <div class="col-lg-12">
                      Entete
                    </div>
                  </header>
                  <div class="row">
                    <nav class="col-sm-2">
                      Menu
                    </nav>
                    <section class="col-sm-10">
                      Section
                      
                    </section>
                  </div>
                  <footer class="row">
                    <div class="col-lg-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>
    3. Solution CSS
      • body {
          padding-top: 10px;
        }
        [class*="col-"] {
          background-color: #90e3ee;
          border: 2px solid #2b09ee;
          border-radius: 6px;
          line-height: 50px;
          text-align: center;
        }



Abonnez vous à notre chaîne YouTube gratuitement