English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap4 Le repli peut facilement réaliser l'affichage et l'occultation du contenu.
<!DOCTYPE html> <html> <head> <title>Exemple Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Réduction simple</h2> <p>En cliquant sur le bouton, le contenu passe d'affiché à caché et vice versa.</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Repli simple</button> <div id="demo" class="collapse"> Je prie pour toi, je t'offre, Nous avons tous eu des expériences imprévues dans notre travail et dans notre vie. Nous avons une petite vie, Je suis en train de faire un stage qui ne me convient pas. </div> </div> </body> </html>测试看看 ‹/›
.La classe collapse est utilisée pour spécifier un élément replié (par exemple, <div>); Après avoir cliqué sur le bouton, il y aura un basculement entre l'occultation et l'affichage.
Pour contrôler l'occultation et l'affichage du contenu, il faut ajouter data sur l'élément <a> ou <button>.-L'attribut toggle="collapse". data-Cible="#id" est le contenu correspondant au repli (<div id="demo">).
Attention : <a> Sur l'élément, vous pouvez utiliser l'attribut href pour remplacer data-Cible Propriétés:
<!DOCTYPE html> <html> <head> <title>Exemple Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Réduction simple</h2> <a href="#demo" class="btn btn-primary" data-toggle="collapse">Réduction simple</a> <div id="demo" class="collapse"> Je prie pour toi, je t'offre, Nous avons tous eu des expériences imprévues dans notre travail et dans notre vie. Nous avons une petite vie, Je suis en train de faire un stage qui ne me convient pas. </div> </div> </body> </html>测试看看 ‹/›
Par défaut, le contenu replié est caché, vous pouvez ajouter la classe .show pour afficher le contenu par défaut :
<!DOCTYPE html> <html> <head> <title>Exemple Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Réduction simple</h2> <p>Vous pouvez ajouter la classe .show pour afficher le contenu par défaut :</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Repli simple</button> <div id="demo" class="collapse show"> Je prie pour toi, je t'offre, Nous avons tous eu des expériences imprévues dans notre travail et dans notre vie. Nous avons une petite vie, Je suis en train de faire un stage qui ne me convient pas. </div> </div> </body> </html>测试看看 ‹/›
L'exemple suivant montre comment afficher un accordéon simple en étendant le composant de carte.
Attention : Utilisation de data-L'attribut parent pour s'assurer que tous les éléments de repli se trouvent sous l'élément parent spécifié, de sorte que d'autres options soient masquées lorsque l'une des options de repli est affichée.
<!DOCTYPE html> <html> <head> <title>Exemple Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Exemple d'accordéon</h2> <p><strong>Attention :</strong> Utilisation de <strong>data-parent</strong> Pour s'assurer que tous les éléments de repli se trouvent sous l'élément parent spécifié, de sorte que d'autres options soient masquées lorsque l'une des options de repli est affichée.</p> <div id="accordion"> <div class="card" <div class="card-header> <a class="card-link" data-toggle="collapse" href="#collapseOne"> Option 1 </a> </div> <div id="collapseOne" class="collapse show" data-parent="#accordion" <div class="card-body> #1 内容：基础知识教程(oldtoolbag.com) -- 学好基础知识，才能走得更远！！！ </div> </div> </div> <div class="card" <div class="card-header> <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo" 选项二 </a> </div> <div id="collapseTwo" class="collapse" data-parent="#accordion" <div class="card-body> #2 内容：基础知识教程(oldtoolbag.com) -- 学好基础知识，才能走得更远！！！ </div> </div> </div> <div class="card" <div class="card-header> <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree" 选项三 </a> </div> <div id="collapseThree" class="collapse" data-parent="#accordion" <div class="card-body> #3 内容：基础知识教程(oldtoolbag.com) -- 学好基础知识，才能走得更远！！！ </div> </div> </div> </div> </div> </body> </html>测试看看 ‹/›