Nachdem Bootstrap heruntergeladen und installiert wurde, finden Sie 12 JS -Dateien in D:/Programmdateien/Nodejs/Node_Modules/Bootstrap/JS. Diese JS-Dateien sind 12 JQuery-Plug-Ins, die mit Bootstrap ausgestattet sind. Sie finden auch Bootstrap.js und Bootstrap.min.js in d:/Programmdateien/nodejs/node_modules/bootstrap/dist/js. Beide Dateien enthalten 12 JQuery-Plug-Ins.
Unter diesen 12 jQuery-Plug-Ins sind die am häufigsten verwendeten Bilder Carousel.js, Tag-Switching-Tab.js, Scrolling-Hörspeicherspy.js, Dropdown-Liste Dropdown.js, Modulbox Popup Layer Modal.js und Eingabeaufforderung Box tOoltip.js .
(I) Bild Carousel.js
Picture Carousel kann die Bildgröße, Position usw. in CSS nach Bedarf einstellen.
Image Carousel erfordert die Einführung von jQuery.min.js und carousel.js oder wansition.js können eingeführt werden, um Übergangseffekte hinzuzufügen.
<div> <div> <div> <!-data-ride = "Carousel" -attribut wird verwendet, um das Karussell zu markieren, das die Animationswiedergabe beginnt, wenn die Seite geladen wird-> <div data-ride = "carousel" id = "carousel-332839"> <ol> <li data-Slide-to = "0", Data-Target = "#"#carousel-332839 "</li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li- Data-Slide-to = "1" data-target = "#carousel-332839"> </li> <li data-slide-to = "2" data-target = "#carousel-332839"> </li> </ol> <div> <div> <div> <divc = "Bilder/chrysAntnail </chrysAntnail </chrysAntnail </chrysAntnail </chrysAntnail </chrysAntnail </chrysAntnail </chrysAntnail </chrysAntnail </chrysAntnail </chrysAntnail </chrysAntnail </ChrysAnthemum.jpg. <p> CRAS Justo Odio, Dapibus AC Facilisis in, Egestas Eget Quam. Donec ID Elit Non Mi Porta Gravida bei Eget Metus. Nullam id dolor id nibh ultrikies fahrt ut id elit. </p> </div> </div> <div> <img src = "Images/Desert.jpg"/> <div> <h4> Zweites Thumbnail -Label </H4> <p> cras Justo Odio, Dapibus AC Facilisis in, EGSTAS Eget Quam. Donec ID Elit Non Mi Porta Gravida bei Eget Metus. Nullam id dolor id nibh ultrikies fahrt ut id elit. </p> </div> </div> <div> <img src = "bilder/hortensieas.jpg"> <div> <h4> drittes Thumbnail -Label </h4> <p> cras justo odio, dapibus ac facilisis in, EGSTAS Eget Quam. Donec ID Elit Non Mi Porta Gravida bei Eget Metus. Nullam id dolor id nibh ultrikies fahrt ut id elit. </p> </div> </div> </div> <a href = "#carousel-332839" data-slide = "prev"> <span> </span> </a> <a href = "#Carousel-332839" Data-SLIDE = "Next> </span> </div> </span> </span> </a> </div> </div> </div> </span> </aa> </div> </div> </div> </div> </span> </aa> </div> </div> </div> </div> </div> </div> </div> </a.
(Ii) TAG -Switching -Tab.js
Die Tag -Switching erfordert die Einführung von jQuery.min.js und tab.js oder transition.js können eingeführt werden, um Übergangseffekte hinzuzufügen.
<div> <div> <div> <div id="tabs-440751"> <ul> <li> <a href="#panel-1" data-toggle="tab">Section 1</a> </li> <li> <a href="#panel-2" data-toggle="tab">Section 2</a> </li> </ul> <div> <div id="panel-1"> <p> I'm in Section 1. </p> </div> <div id = "panel-2"> <p> Ich bin in Abschnitt 2. </p> </div> </div> </div> </div> </div> </div> </div> </div>
(Iii) Scrolling Hören Sie ScrollSpy.js und Dropdown -Liste Dropdown.js
Kombinieren Sie Scrollen- und Dropdown-Listen, um eine Navigationsleiste zu erstellen, mit der scrollen und mit einer Dropdown-Liste zuhören können.
Sie müssen einen Stil festlegen, der Stil dieses Beispiels lautet:
.A, .b {Höhe: 500px; Breite: 100%;}. B {Hintergrundfarbe: Weiß;}. A {Hintergrundfarbe: schwarz;}jQuery.min.js, Dropdown.js, scrollspy.js müssen eingeführt werden.
<body data-spy = "scroll" data-target = "#navBarexample"> <div> <div> <div> <div> <div id = "navBarexample"> <div> <button type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1"> <span> <spannung navigation</span><span></span><span></span><span></span><span></span> </button> <a href="#">Brand</a> </div> <div id="bs-example-navbar-collapse-1"> <ul> <li> <a href="#1">Link</a> </li> <li> <a href="#2">Link</a> </li> <li> <a href="#3" data-toggle="dropdown">Dropdown<strong></strong></a> <ul> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else 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="submit"> Submit </button> </form> <ul> <li> <a href="#4">Link</a> </li> <li> <a href="#5" data-toggle="dropdown">Dropdown<strong></strong></a> <ul> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li> </li> <li> <a href="#">Separated link</a> </li> </li> </li> </li> </ul> </div> </div> </div> </div> </div> <div> <!-- Use <div data-spy="scroll" data-target="#navbarExample"> --> <div> <div id="1"></div> <div id="2"></div> <div id="3"></div> <div id="4"></div> <div id="5"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
(Iv) Modal-Rahmen-Popup-Schicht modal.js
Sie müssen jQuery.min.js und modal.js vorstellen, oder Sie können übergangs.js einführen, um Übergangseffekte hinzuzufügen.
<div> <div> <a id = "modal-732948" href = "#modal-container-732948" rolle = "button" data-toggle = "modal"> Demo modal </a> <div id = "modal-container-732948" rollen "-Rrolle" "truedBy" -Ralog "-Ighorn" -Ralog "aria-labelledBy =" mymodallabel "dialog" ariaDeGeBy = "ariaDaDyDe =" ariaDaIna "aria-labelledBy =" mymodallabel "dialog" aria-labelledBy = "mymodallabel" dialog "aria-labelledBy =" mymodallabel "dialog" dialog "aria-labelledBy =" mymodallabel "dialog" aria-labelledby <div> <div> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4 id = "myModallabel"> modaler Titel </h4> </div> <div> ... </div> <div> <button type = button type "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) Eingabeaufforderung Box Tooltip.js
Sie müssen jQuery.min.js und tooltip.js vorstellen, oder Sie können übergangs.js einführen, um Übergangseffekte hinzuzufügen.
Außerdem ist das Tooltip -Plugin nicht wie andere Plugins, sondern kein reines CSS -Plugin. Um dieses Plugin zu verwenden, müssen Sie JQuery verwenden, um es zu aktivieren.
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip ();}); <body style = "padding: 100px;" > <a href="#" data-toggle="tooltip" >Default Tooltip</a> <br/> <a href="#" data-toggle="tooltip" data-placement="left">Tooltip on the left</a> <br/> <a href="#" data-toggle="tooltip" data-placement="top" >Tooltip on the top</a> <br/> <a href = "#" data-toggle = "Tooltip" data-placement = "booth"> tOoltip unten </a> <br/> <a href = "#" data-toggle = "tooltip" data-placement = "rechts"> Tooltip am rechten </a> </</butth-type = button = button <br/> <button type="button" data-toggle="tooltip" data-placement="left">Tooltip on the left</button> <br/> <button type="button" data-toggle="tooltip" data-placement="top">Tooltip at the top</button> <br/> <button type="button" data-toggle="tooltip" data-placement="bottom">Tooltip at the unten </button> <br/> <Schaltfläche type = "button" data-toggle = "tooltip" data-placement = "rechts"> Tooltip rechts </button> </body>Wunderbares Thema Teilen: JQuery Bild Karussell JavaScript Bild Karussell Bootstrap Bild Karussell
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Tutorial für Bootstrap -Tischnutzung
Dieser Artikel wurde in das "Bootstrap -Plugin -Nutzungstutorial" zusammengestellt, und jeder kann gerne lernen und lesen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.