Bootstrap 4 - Réduire

La description

Le composant Collapse est utilisé pour afficher ou masquer le contenu à l'aide de la classe .collapse . Le contenu peut être réduit en ajoutant une ancre d'attribut data-toggle = "collapse" ou un élément de bouton. L'identifiant de ces éléments fait référence à l'identifiant du contenu pour réduire les données.

Réduire à l'aide du lien

Vous pouvez réduire le contenu avec la balise <a> en utilisant la valeur href de l'ID du contenu à réduire.

L'exemple suivant illustre ceci -

Exemple

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Collapse with Link</h2>
         <p>
            <a class = "btn btn-info" data-toggle = "collapse" 
               href = "#collapsewithlink" role = "button" aria-expanded = "false" 
               aria-controls = "collapsewithlink">Click Me</a>
         </p>
         
         <div class = "collapse" id = "collapsewithlink">
            <div class = "card card-body">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
               veniam, quis nostrud exercitation.
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Il produira le résultat suivant -

Production

Réduire à l'aide du bouton

Vous pouvez réduire le contenu avec la balise <button> en utilisant l' attribut data-target avec la valeur de l'ID du contenu à réduire.

L'exemple suivant illustre ceci -

Exemple

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Collapse with Button</h2>
         <p>
            <button class = "btn btn-indo" type = "button" data-toggle = "collapse" 
               data-target = "#collapsewithbutton" aria-expanded = "false" 
               aria-controls = "collapsewithbutton">Click Me</button>
         </p>
         
         <div class = "collapse" id = "collapsewithbutton">
            <div class = "card card-body">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
               tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
               veniam, quis nostrud exercitation.
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Il produira le résultat suivant -

Production

Accordéon

Vous pouvez utiliser du contenu pliable pour créer un accordéon qui est souvent utilisé pour du contenu tel que des FAQ, des aperçus, etc.

L'exemple ci-dessous spécifie un accordéon simple en étendant le composant carte -

Exemple

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Accordion </h2>
         <div id = "accordion">
            <div class = "card">
               <div class = "card-header">
                  <a class = "card-link" data-toggle = "collapse" href = "#collapseOne">
                     Accordion #1
                  </a>
               </div>
               
               <div id = "collapseOne" class = "collapse show" data-parent = "#accordion">
                  <div class = "card-body">Content for Accordion #1.</div>
               </div>
            </div>
            
            <div class = "card">
               <div class = "card-header">
                  <a class = "collapsed card-link" data-toggle = "collapse" href = "#collapseTwo">
                     Accordion #2
                  </a>
               </div>
               
               <div id = "collapseTwo" class = "collapse" data-parent = "#accordion">
                  <div class = "card-body">Content for Accordion #2.</div>
               </div>
            </div>
            
            <div class = "card">
               <div class = "card-header">
                  <a class = "collapsed card-link" data-toggle = "collapse" href = "#collapseThree">
                     Accordion #3
                  </a>
               </div>
               
               <div id = "collapseThree" class = "collapse" data-parent = "#accordion">
                  <div class = "card-body"> Content for Accordion #3.</div>
               </div>
            </div>
            
         </div>
      </div>
    
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Il produira le résultat suivant -

Production

↰ Previous page

Bootstrap 4 - Réduire

La description

Réduire à l'aide du lien

Exemple

Production

Réduire à l'aide du bouton

Exemple

Production

Accordéon

Exemple

Production

Tutoriel Bootstrap 4

Bootstrap 4 Ressources utiles