Le plugin d'effondrement facilite le pliage de la zone de la page. Que vous l'utilisiez pour créer une navigation effondrée ou un panneau de contenu, il permet de nombreuses options de contenu.
Si vous souhaitez référencer la fonctionnalité du plugin individuellement, vous devez référencer Challapse.js, ou, comme mentionné dans le chapitre Bootstrap Plugin Présentation , vous pouvez référencer Bootstrap.js ou versions compressées de bootstrap.min.js.
1. Utilisation
Le tableau suivant répertorie le plug-in Effondrement pour la gestion de l'échelle lourde:
Vous pouvez utiliser le plugin Collapse de deux manières:
Via l'attribut de données: ajoutez data-toggle = "effondrer" et data-cible à l'élément pour attribuer automatiquement les contrôles aux éléments pliables. La propriété de cible de données accepte un sélecteur CSS et lui applique un effet d'effondrement. Assurez-vous d'ajouter une classe .Collapse à l'élément pliable. Si vous voulez qu'il soit allumé par défaut, ajoutez une classe supplémentaire .in.
Pour ajouter une gestion de regroupement de type panneau plié au contrôle pliable, ajoutez la propriété Data Data-Parent = "# Selector".
Via JavaScript : la méthode d'effondrement peut être activée via JavaScript, comme indiqué ci-dessous:
$ ('. effondrement'). Effondrement ()
2. Exemples
Le contenu peut être effondré en cliquant.
// Exemple de base
<Button data-toggle = "effondrement" data-target = "# contenu"> bootstrap </futton> <div id = "contenu"> <div> bootstrap est une boîte à outils open source pour le développement frontal lancé par Twitter. Il a été développé par le concepteur de Twitter Mark Otto et Jacob Thornton et est un cadre CSS / HTML. Actuellement, la dernière version de Bootstrap est de 3.0. </div> </div>
// pliage d'accordéon
<div id = "accordéon"> <div> <div> <h4> <a href = "# effondrement" data-toggle = "effondrement" Data-Parent = "# Accordion"> Cliquez sur moi pour afficher, puis cliquez sur moi pour plier, la partie 1 </a> </h4> </div> <div id = "ColchapseOne"> <v> La première partie est la première. </div> </div> </div> <div> <h4> <a href = "# colllatssetwo" data-toggle = "effondrement" data-parent = "# accordéon"> Cliquez sur moi pour afficher, puis cliquez sur moi pour plier, partie 2 </a> </h4> </v> <div id = "Collapsetwo"> <div> Voici la deuxième partie. </div> </ div> </div> <div> <div> <h4> <a href = "# collapetHree" data-toggle = "effondrement" Data-Parent = "# accordéon"> Cliquez sur moi pour afficher, puis cliquez sur moi pour plier, la partie 3 </a> </h4> </v> <div id = "ColllateSet"> <div> Voici la troisième partie. </div> </div> </div> </div>
// Effet d'accordéon
$ ('# collapseOne, # collapsetwo, # collapSetHree, #CollapseFour'). ECHAPPEMENT ({parent: '#Assordion', toggle: false,});// appelle manuellement
$ ('bouton'). sur ('click', function () {$ ('# collatseOne'). Effondrement ({toggle: true,});});// La méthode d'effondrement fournit également trois paramètres: masquer, afficher et basculer.
$ ('# effondrement'). effondrement ('hide'); $ ('# collapsetwo'). effondrement ('show'); $ ('bouton'). on ('click', function () {$ ('# effondrement'). effondrement ('toggle');});Il existe quatre types d'événements dans le plug-in Collapse.
// événements, autres similitudes
$ ('# effondrement'). on ('show.bs.collapse', function () {alert ('free lorsque la méthode show est appelée');});J'espère que cet article sera utile et inspirant pour en savoir plus sur le plug-in Bootstrap Collapse.