Bootstrap, de Twitter, est actuellement le cadre frontal le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript. Il est simple et flexible, ce qui rend le développement Web plus rapide. Ensuite, à travers cet article, je vous présenterai l'exemple du plug-in de pliage de bootstrap (effondrement). Jetons un coup d'œil!
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 séparément, vous devez référencer l'effondrement.js. En même temps, vous devez également référencer le plugin de transition dans votre version bootstrap. Ou, comme mentionné dans le chapitre Bootstrap Plugin Présentation, vous pouvez vous référer à bootstrap.js ou versions compressées de bootstrap.min.js.
Vous pouvez utiliser le plugin Collapse:
Créez un panneau de regroupement ou de pliage pliable comme suit:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - panneau de pliage </ title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ scripts / jquet.min.js"> </cript> src = "/ bootstrap / js / bootstrap.min.js"> </ script> <body> <div id = "accordéon"> <div> <h4> <a data-toggle = "effondrement" data-parent = "# accordion" href = "# effondrement"> cliquez sur moi pour m'étendre, cliquez sur moi pour s'effondrer. Partie 1 </a> </h4> </div> <div id = "CollapseOne"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea Proident. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "effondrement" Data-Parent = "# accordéon" href = "# collapsetwo"> Cliquez sur moi pour vous développer, cliquez sur moi pour s'effondrer à nouveau. Partie 2 </a> </h4> </div> <div id = "Collapsetwo"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea Proident. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "effondrement" Data-Parent = "# Accordeon" href = "# ColllaSetHree"> Cliquez sur moi pour vous développer, cliquez sur moi pour s'effondrer à nouveau. Partie 3 </a> </h4> </div> <div id = "Collapsethree"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea proviant. AD Vegan Excepteur Butcher VICE LOMO. </div> </div> </div> </div> </ body> </html>
Les résultats sont les suivants:
Data-Toggle = "Effondrement" est ajouté au lien vers le composant que vous souhaitez développer ou s'effondrer.
La propriété HREF ou Data-Target est ajoutée au composant parent, et sa valeur est l'ID du composant enfant.
La propriété de données de données ajoute l'ID du panneau effondré au lien du composant à élargir ou à s'effondrer.
Créez un composant pliable simple sans la balise d'accordéon, comme indiqué ci-dessous:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - composant pliable simple </ title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ scripts / jQuery.min.js"> </cript> src = "/ bootstrap / js / bootstrap.min.js"> </ script> <body> <bouton type = "Button" data-toggle = "effondrement" data-target = "# démo"> Composant pliable simple </button> <div id = "Demo"> Nihil anima AD Vegan Excepteur Butcher VICE LOMO. </div> </ Body> </Html>
Les résultats sont les suivants:
Comme vous pouvez le voir dans le cas, nous avons créé un composant pliable, contrairement au panneau plié, nous n'avons pas ajouté le parent de données de propriété.
usage
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 ()Options
Il existe certaines options qui sont transmises à travers les propriétés de données ou JavaScript. Le tableau suivant répertorie ces options:
méthode
Voici quelques méthodes utiles dans les plugins d'effondrement:
Exemple
L'exemple suivant démontre l'utilisation de la méthode:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - méthode de plug-in de collations </tapt> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "StylesHeet"> <script src = "/ scripts / jQuery.min.js"> </ script> </ script> </ script> src = "/ bootstrap / js / bootstrap.min.js"> </ script> <body> <div id = "accordéon"> <div> <h4> <a data-toggle = "effondrement" data-parent = "# accordion" href = "# effondrement"> cliquez sur moi pour m'étendre, cliquez sur moi pour s'effondrer. Partie 1 - Méthode de hide </a> </h4> </div> <div id = "CollapseOne"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea Prodent. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "effondrement" Data-Parent = "# accordéon" href = "# collapsetwo"> Cliquez sur moi pour vous développer, cliquez sur moi pour s'effondrer à nouveau. PARTIE 2 - Méthode de show </a> </h4> </div> <div id = "Collapsetwo"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea PROREIENT. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> <div> <div> <h4> <a data-toggle = "effondrement" Data-Parent = "# Accordeon" Href = "# ColllaSetHree"> Cliquez sur moi pour vous développer, cliquez sur moi pour s'effondrer à nouveau. Partie 3 - Méthode de toggle </a> </h4> </div> <div id = "Collapsethree"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea PROREIENT. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> <div> <h4> <a data-toggle = "effondrement" Data-Parent = "# accordéon" href = "# CollapseFour"> Cliquez sur moi pour vous développer, cliquez sur moi pour s'effondrer à nouveau. Partie 4 - Méthode des options </a> </h4> </div> <div id = "Collapsefour"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea PROREIENT. AD Vegan ExceptEur Butcher Vice Lomo. </div> </div> </div> <script type = "Text / Javascrip $ ('# collapSetHree'). effondrement ('toggle')}); $ (function () {$ ('# collapsee'). effondrement ('hide')}); </script> </ body> </html>Les résultats sont les suivants:
événement
Le tableau suivant répertorie les événements à utiliser dans le plug-in Follapse. Ces événements peuvent être utilisés comme crochets dans les fonctions.
Exemple
L'exemple suivant démontre l'utilisation des événements:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - événement de plugin allapse </ title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ scripts / jQuery.min.js"> </cript> </ script> </ script> src = "/ bootstrap / js / bootstrap.min.js"> </ script> <body> <div id = "accordéon"> <div> <h4> <a data-toggle = "effondrement" data-parent = "# accordion" href = "# collapsexample"> cliquez sur moi pour m'étendre, cliquez pour collosser à nouveau. - Événementhown </a> </h4> </div> <div id = "CollapseExample"> <div> Nihil Anim Keffiyeh Helvetica, Craft Beer Labor Wes Anderson Cred Nesciunt Sapiente ea Proident. AD Vegan Excepteur Butcher Vice Lomo. </div> </div> </div> <Script Type = "Text / JavaScript"> $ (function () {$ ('# CollapseExample'). Sur ('show.bs.collapse'Les résultats sont les suivants:
Ce qui précède est l'explication détaillée de l'exemple d'utilisation du plug-in Bootstrap Rolding (Effondrement) introduit par l'éditeur. J'espère que ce sera utile à tous!