Correction TP2 la grille Bootstrap Ex01

Sommaire

1- Objectifs
2- Exercice 01
2.1- Énoncé
2.2- Solution HTML
2.3- Solution CSS
2.3.1- Sommaire du cours Bootstrap

Correction TP2 la grille Bootstrap Ex01

Objectifs

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

Exercice 01

Énoncé

l’énoncé de l’exercice

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>

Solution CSS

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

Sommaire du cours Bootstrap

CSS

Correction TP2 la grille Bootstrap Ex01

Correction TP2 la grille Bootstrap Ex01

Objectifs

Exercice 01

Énoncé

Solution HTML

Solution CSS

Sommaire du cours Bootstrap

Correction TP la grille Bootstrap Ex03

Correction TP2 la grille Bootstrap Ex02

CSS

Correction TP2 la grille Bootstrap Ex01

Objectifs

Exercice 01

Énoncé

Solution HTML

Solution CSS

Sommaire du cours Bootstrap

Correction TP la grille Bootstrap Ex03

Correction TP2 la grille Bootstrap Ex02

You may also like

Protégé : Correction applications les opérateurs en JavaScript

Les pseudo-éléments en CSS

Examen 5 en HTML , CSS et Bootstrap