Correction TP la grille Bootstrap Ex05
Correction TP la grille Bootstrap Ex05
-
Objectifs
- Créer rapidement une mise en page flexible et responsive avec le système de grille.
-
Exercice 05
-
Énoncé
-
Solution
-
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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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://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>