Une fois Bootstrap téléchargé et installé, vous pouvez trouver 12 fichiers JS dans D: / Program Files / Nodejs / Node_Modules / Bootstrap / JS. Ces fichiers JS sont 12 plug-ins jQuery qui sont livrés avec Bootstrap. Vous pouvez également trouver Bootstrap.js et bootstrap.min.js dans d: / programme files / nodejs / node_modules / bootstrap / dist / js. Les deux fichiers contiennent 12 plug-ins jQuery.
Parmi ces 12 plug-ins jQuery, les plus couramment utilisés sont Picture Carousel.js, Tag Switching Tab.js, défilement à écouter ScrollSpy.js, Dropdown List Dropdown.js, module Box Pop-up Layer Modal.js et Invite Box Tooltip.js .
(I) photo carrousel.js
Le carrousel d'image peut définir la taille de l'image, la position, etc. dans CSS au besoin.
Le carrousel d'image nécessite l'introduction de jQuery.min.js et de carousel.js, ou transition.js peut être introduit pour ajouter des effets de transition.
<div> <div> <div> <! - Data-ride = "carrousel" L'attribut est utilisé pour marquer le carrousel qui démarre la lecture de l'animation lorsque la page est chargée -> <div data-ride = "carrousel" id = "carousel-332839"> <lo> <li data-slide-to = "0" data-target = "# carousel-332839"> </ li> <li> <li> Data-Slide-to = "1" Data-Target = "# Carousel-332839"> </li> <li Data-Slide-to = "2" Data-Target = "# Carousel-332839"> </li> </l> <div> <div> <img src = "Images / chrysanthemum.jpg" /> <v> <p> Cras Justo Odio, Dapibus AC Facilisis dans, Egestas Eget Quam. Donec id elit non mi porta gravida à eget metus. Nullam id Dolor id nibh ultrices véhicula ut id elit. </p> </ div> </ div> <div> <img src = "images / désert.jpg" /> <div> <h4> Deuxième étiquette miniature </h4> <p> Cras Justo odio, dapibus ac facilisis in, egstas eget quam. Donec id elit non mi porta gravida à eget metus. Nullam id Dolor id nibh ultrices véhicula ut id elit. </p> </div> </div> <div> <img src = "images / hydrangeas.jpg"> <div> <h4> troisième étiquette miniature </h4> <p> Cras Justo odio, dapibus ac facilisis in, egstas eget quam. Donec id elit non mi porta gravida à eget metus. Nullam id Dolor id nibh ultrices véhicula ut id elit. </p> </div> </div> </div> <a href = "# Carousel-332839" Data-Slide = "PREV"> <span> </span> </a> <a href = "# Carousel-332839" Data-Slide = "Next"> <pan> </spande> </a> </v> </v>
(Ii) Tab de commutation de balise.js
La commutation de balises nécessite l'introduction de jQuery.min.js et tab.js, ou transition.js peut être introduite pour ajouter des effets de transition.
<div> <div> <div> <div id = "tabs-440751"> <ul> <li> <a href = "# Pannel-1" data-toggle = "tab"> section 1 </a> </li> <li> <a href = "# Panel-2" Data-toggle = "Tab"> Section 2 </a> </li> </ul> </ul> </v> </p> </ div> <div id = "Panel-2"> <p> Je suis dans la section 2. </p> </div> </div> </div> </div> </div> </div> </div> </div>
(Iii) défilement à l'écoute de ScrollSpy.js et liste déroulante Dropdown.js
Combinez des listes de défilement et de déroute pour créer une barre de navigation qui peut faire défiler et écouter avec une liste déroulante.
Vous devez définir un style, le style de cet exemple est:
.a, .b {hauteur: 500px; Largeur: 100%;}. B {fond de fond: blanc;}. A {fond-couleur: noir;}jquery.min.js, dropdown.js, scrollspy.js doivent être introduits.
<Body Data-Spy = "Scroll" Data-Target = "# Navbarexample"> <div> <div> <div> <div> <div id = "Navbarexample"> <div> <Button Type = "Button" Data-Toggle = "ENCLAPPE Navigation </span> <span> </span> <span> </span> <span> </span> <span> </span> </futton> <a href = "#"> marque </a> </v> <div id = "bs-example-navbar-Collapse-1"> <ul> <li> <a href = "# 1 "> </a> href = "# 2"> lien </a> </li> <li> <a href = "# 3" data-toggle = "dropdown"> Dropdown <strong> </strong> </a> <ul> <li> <a href = "#"> Action </a> </li> <li> <a href = "#"> # #> " here</a> </li> <li> <a href="#">Separated link</a> </li> <li> <a href="#">Separated link</a> </li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> <form role="search"> <div> <input type="text"> </div> <Button Type = "Soumider"> Soumettre </futton> </ form> <ul> <li> <a href = "# 4"> lien </a> </li> <li> <a href = "# 5" data-toggle = "Dropdown"> Dropdown <strong> </strong> </a> <ul> <li> <a href = "#"> Action </a> Action </a> </li> <li> <a href = "#"> Quelque chose d'autre ici </a> </li> <li> </li> <li> <a href = "#"> Lien séparé </a> </li> </li> </li> </li> </ul> </v> </v> </v> </v> </ving data-target = "# navbarexample"> -> <div> <div id = "1"> </ div> <div id = "2"> </ div> <div id = "3"> </ div> <div id = "4"> </ div> <div> </v> </v> </v> </v> </v> </v> </v> </v> </v> </ div> </div> </div> </ body> </html>
(Iv) Couche pop-up de cadre modal.js
Vous devez introduire jquery.min.js et modal.js, ou vous pouvez introduire transition.js pour ajouter des effets de transition.
<div> <div> <a id="modal-732948" href="#modal-container-732948" role="button" data-toggle="modal">Launch demo modal</a> <div id="modal-container-732948" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <Button Type = "Button" Data-Dismiss = "MODAL" Aria-Hidden = "True"> × </ Button> <H4 ID = "MyModallabel"> Titre modal </H4> </ Div> <v> ... </div> <div> <Button Type = "Button" DataDismiss = "Modal> </button> <Button> <Button Type =" Button "Button </ MODAL> </ Button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
(V) Invite Box Tooltp.js
Vous devez introduire jQuery.min.js et ToolTip.js, ou vous pouvez introduire Transition.js pour ajouter des effets de transition.
En outre, le plugin d'info-bulle n'est pas comme les autres plugins, ce n'est pas un plugin CSS pur. Pour utiliser ce plugin, vous devez utiliser jQuery pour l'activer.
$ (function () {$ ("[data-toggle = 'toolfp']"). toolfip ();}); <Style Body = "Padding: 100px;" > <a href = "#" data-toggle = "tooltip"> Infacturation par défaut </a> <br/> <a href = "#" data-toggle = "tooltip" data-plaxer = "Left"> toolpp sur le gauche </a> <br/> <a href = "#" datoggle = "toolTip" data-placement = "top <a href = "#" "data-toggle =" tooltip "data-place =" inférieur "> Infraction en bas </a> <br/> <a href =" # "" dato-toggle = "tooltip" data-plaquet = "droite"> bouton à tool Type = "Button" Data-Toggle = "FOOLPIP" DATA-PLACTION = "Left"> Toolpp à gauche </futton> <br/> <Button Type = "Button" Data-Toggle = "TOOLPIP" Data-Placement = "TOPL"> TOOLTIP AT TOPL </ Button> <brt/> <Button Type = "Button" Datoggle = "ToolTip" Data-PLACTING = "Bottom"> inférieur " <Button Type = "Button" Data-Toggle = "ToolTip" Data-PLACET = "Droite"> Infilation sur le droit </fontificateur> </body>Merveilleux sujet Partage: JQUERY Picture Carrousel Javascript Picture Carrousel Bootstrap Picture Carrousel
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation de la table bootstrap
Cet article a été compilé dans le "tutoriel d'utilisation du plugin bootstrap", et tout le monde est le bienvenu pour apprendre et lire.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.