Correction TP3 Bootstrap

Correction TP3 Bootstrap

  1. Objectif

    • Être capable d’utiliser les listes Bootstrap.
  2. Exercice 01

  3. Énoncé
  4. 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>
      
      



  5. Exercice 02

  6. Énoncé
  7. 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>



Abonnez vous à notre chaîne YouTube gratuitement