Correction TP la grille Bootstrap Ex02
- Posted by Riadh HAJJI
- Categories CSS
- Date 14 décembre 2019
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>
Riadh HAJJI
You may also like
Protégé : Correction applications les opérateurs en JavaScript
5 octobre, 2023
Il n’y a pas d’extrait, car cette publication est protégée.
Les pseudo-éléments en CSS
11 décembre, 2022
Les sélecteurs simples en CSS Les sélecteurs d’attribut en CSS Les combinateurs CSS Les pseudo-classes en CSS Les pseudo-éléments en CSS Exercices en CSS les sélecteurs Série 01 (Correction) Exercices en CSS les sélecteurs Série 02 (Correction) Exercices en CSS …
Examen 5 en HTML , CSS et Bootstrap
19 mai, 2022
Examen en HTML et CSS Examen 2 en HTML et CSS Examen 3 en HTML , CSS et JS Examen 4 en HTML , CSS et JS Examen 5 en HTML , CSS et Bootstrap Examen 5 en HTML , …