Correction TP la grille Bootstrap Ex02
Correction TP la grille Bootstrap Ex02
-
Objectifs
- Créer rapidement une mise en page flexible et responsive avec le système de grille.
-
Exercice 02
-
Énoncé
-
Solution
-
Vous pouvez visualiser l’énoncé de l’exercice
-
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>
