Correction TP2 la grille Bootstrap Ex03
Correction TP2 la grille Bootstrap Ex03
-
Objectifs
- Créer rapidement une mise en page flexible et responsive avec le système de grille.
-
Exercice 03
-
Énoncé
-
Solution 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<h3 class="text-primary text-center">Affichage de 4 colonnes</h3>
<div class= "container">
<div class= "row">
<div class ="col-md-3 bg-warning">
<h6>HTML5</h6>
<p>HTML5 (HyperText Markup Language 5) est la dernière révision majeure du HTML (format de données conçu pour représenter les pages web). Cette version a été finalisée le 28 octobre 2014. </p>
</div>
<div class ="col-md-3 bg-primary">
<h6>CSS3</h6>
<p>Les feuilles de style en cascade1, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML.</p>
</div>
<div class ="col-md-3 bg-info">
<h6>JavaScript</h6>
<p>JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs avec l'utilisation (par exemple) de Node.js. </p>
</div>
<div class ="col-md-3 bg-success">
<h6>jQuery</h6>
<p>jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web. La première version est lancée en janvier 2006 par John Resig.</p>
</div>
</div>
</div>
<h3 class="text-warning text-center">Affichage de 3 colonnes</h3>
<div class= "container">
<div class= "row">
<div class ="col-sm-4 bg-warning">
<h6>HTML5</h6>
<p>HTML5 (HyperText Markup Language 5) est la dernière révision majeure du HTML (format de données conçu pour représenter les pages web). Cette version a été finalisée le 28 octobre 2014. </p>
</div>
<div class ="col-sm-4 bg-primary">
<h6>CSS3</h6>
<p>Les feuilles de style en cascade1, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML.</p>
</div>
<div class ="col-sm-4 bg-info">
<h6>JavaScript</h6>
<p>JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs avec l'utilisation (par exemple) de Node.js. </p>
</div>
</div>
</div>
<h3 class="text-danger text-center">Affichage de 2 colonnes</h3>
<div class= "container-fluid">
<div class= "row">
<div class ="col-sm-6 bg-warning">
<h6>HTML5</h6>
<p>HTML5 (HyperText Markup Language 5) est la dernière révision majeure du HTML (format de données conçu pour représenter les pages web). Cette version a été finalisée le 28 octobre 2014. </p>
</div>
<div class ="col-sm-6 bg-primary">
<h6>CSS3</h6>
<p>Les feuilles de style en cascade1, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML.</p>
</div>
</div>
</div>
<h3 class="text-success text-center">
Affichage de 2 colonnes égales avec séparation</h33>
<div class= "container-fluid">
<div class= "row">
<div class ="col-sm-4 bg-warning">
<h6>HTML5</h6>
<p>HTML5 (HyperText Markup Language 5) est la dernière révision majeure du HTML (format de données conçu pour représenter les pages web). Cette version a été finalisée le 28 octobre 2014. </p>
</div>
<div class ="col-sm-4 offset-sm-4 bg-primary">
<h6>CSS3</h6>
<p>Les feuilles de style en cascade1, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML.</p>
</div>
</div>
</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>