Correction TP3 Bootstrap
Correction TP3 Bootstrap
-
Objectif
- Être capable d’utiliser les listes Bootstrap.
-
Exercice 01
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
-
Exercice 02
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Correction exercice 01</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container pt-4">
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item"> HTML5</li>
<li class="list-group-item"> CSS</li>
<li class="list-group-item"> Bootstrap</li>
<li class="list-group-item"> JQuery</li>
<li class="list-group-item"> SCSS</li>
<li class="list-group-item"> PHP</li>
</ul>
</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>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Correction exercice 01</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container pt-4">
<div class=""row">
<div class="col-lg-8">
<h2>Listes de définitions horizontales</h2>
<dl class="row">
<dt class="col-sm-4">Liste de description</dt>
<dd class="col-sm-8">Une liste de description est idéal pour la définition des termes.</dd>
</dl>
<dl class="row">
<dt class="col-sm-4">Sans style </dt>
<dd class="col-sm-8"> Il existe la classe list-unstyled, à appliquer à la balise cul>,
ce qui donne donc cul class="list-unstyled"5, qui supprime les puces.
Voici à la figure suivante le résultat sur la liste de la page..</dd>
</dl>
<dl class="row">
<dt class="col-sm-4">List group</dt>
<dd class="col-sm-8">Les groupes de listes sont un composant flexible et puissant pour afficher
une série de contenus.Modifiez-les et étendez-les pour prendre en charge à peu près n'importe quel contenu.
</dd>
</dl>
<dl class="row">
<dt class="col-sm-4"> Éléments actifs</dt>
<dd class="col-sm-8">Ajouter <b>.active</b> à <b>.list-group-item</b> pour indiquer la sélection active actuelle.
</dd>
</dl>
<dl class="row">
<dt class="col-sm-4">Éléments désactivés</dt>
<dt class="col-sm-4">Les classes .disabled à .Iist-group-item
<dd class="col-sm-4"> Notez que certains éléments avec .disablednécessiteront également un JavaScript personnalisé pour désactiver complètement leurs événements de clic (par exemple, les liens).
</dd></dt>
</dl>
</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>