Correction TP la grille Bootstrap Ex01
Correction TP la grille Bootstrap Ex01
-
Objectifs
- Créer rapidement une mise en page flexible et responsive avec le système de grille.
-
Exercice 01
-
Énoncé
-
Solution
-
Exercice 05
-
Énoncé
-
Solution
-
Vous pouvez visualiser l’énoncé de l’exercice
-
Fichier CSS
body{
padding-top: 10px;
}
[class*="col-"] {
background-color: #90e3ee;
border: 2px solid #2b09ee;
border-radius: 6px;
line-height: 50px;
text-align: center;
}
schémas01 : HTML
<!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">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8">
8 colonnes
<div class="row">
<div class="col-lg-3">3 colonnes</div>
<div class="col-lg-6">6 colonnes</div>
<div class="col-lg-3">3 colonnes</div>
</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 : HTML
...........
<div class="col-lg-4">
4 colonnes
</div>
................
schémas03 : HTML
<!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">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">Premier niveau avec 12 colonnes
<div class="row">
<div class="col-md-8">Second niveau avec 8 colonnes
<div class="row">
<div class="col-md-4">Troisième niveau avec 4 colonnes</div>
<div class="col-md-6 col-md-offset-2">Troisième niveau avec 6 colonnes
<div class="row">
<div class="col-md-3 col-md-offset-1">Quatrième niveau avec 3 colonnes</div>
<div class="col-md-5 col-md-offset-1">Quatrième niveau avec 5 colonnes</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">Second niveau avec 4 colonnes</div>
</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>
-
Vous pouvez visualiser l’énoncé de l’exercice
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/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://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>
