Objectif
- Être capable d'utiliser les listes Bootstrap.
Exercice 01
É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>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"> <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>