After Bootstrap is downloaded and installed, you can find 12 JS files in D:/Program Files/nodejs/node_modules/bootstrap/js. These JS files are 12 jQuery plug-ins that come with Bootstrap. You can also find bootstrap.js and bootstrap.min.js in D:/Program Files/nodejs/node_modules/bootstrap/dist/js. Both files contain 12 jQuery plug-ins.
Among these 12 jQuery plug-ins, the most commonly used are picture carousel.js, tag switching tab.js, scrolling listening scrollspy.js, dropdown list dropdown.js, module box pop-up layer modal.js and prompt box tooltip.js .
(I) Picture carousel.js
Picture carousel can set the image size, position, etc. in CSS as needed.
Image carousel requires the introduction of jquery.min.js and carousel.js, or transition.js can be introduced to add transition effects.
<div> <div> <div> <!-- data-ride="carousel" attribute is used to mark the carousel that starts animation playback when the page is loaded --> <div data-ride="carousel" id="carousel-332839"> <ol> <li data-slide-to="0" data-target="#carousel-332839"> </li> <li data-slide-to="1" data-target="#carousel-332839"> </li> <li data-slide-to="2" data-target="#carousel-332839"> </li> </ol> <div> <div> <img src="images/Chrysanthemum.jpg" /> <div> <h4> First Thumbnail label </h4> <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> <div> <img src="images/Desert.jpg"/> <div> <h4> Second Thumbnail label </h4> <p> Cras justo odio, dapibus ac facilisis in, egstas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div> <div> <img src="images/Hydrangeas.jpg"> <div> <h4> Third Thumbnail label </h4> <p> Cras justo odio, dapibus ac facilisis in, egstas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula 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></span></a> </div> </div> </div> </div>
(II) Tag switching tab.js
Tag switching requires the introduction of jquery.min.js and tab.js, or transition.js can be introduced to add transition effects.
<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> I'm in Section 2. </p> </div> </div> </div> </div> </div> </div> </div> </div>
(III) Scrolling listening to scrollspy.js and dropdown list dropdown.js
Combine scrolling and drop-down lists to create a navigation bar that can scrolling and listening with a drop-down list.
You need to set a style, the style of this example is:
.a,.b{ height: 500px; width: 100%;}.b{ background-color: white;}.a{ background-color: black;}jquery.min.js, dropdown.js, scrollspy.js need to be introduced.
<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>Toggle 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 frame pop-up layer modal.js
You need to introduce jquery.min.js and modal.js, or you can introduce transition.js to add transition effects.
<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"> Modal title </h4> </div> <div> ... </div> <div> <button type="button" data-dismiss="modal"> Close </button> <button type="button"> Save changes </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> </div>
(V) Prompt box tooltip.js
You need to introduce jquery.min.js and tooltip.js, or you can introduce transition.js to add transition effects.
Also, the Tooltip plugin is not like other plugins, it is not a pure CSS plugin. To use this plugin, you must use jquery to activate it.
$(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="bottom" >Tooltip at the bottom</a> <br/> <a href="#" data-toggle="tooltip" data-placement="right" >Tooltip on the right</a> <br/> <button type="button" data-toggle="tooltip" >Default Tooltip</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 bottom</button> <br/> <button type="button" data-toggle="tooltip" data-placement="right">Tooltip on the right</button></body>Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap Table usage tutorial
This article has been compiled into the "Bootstrap Plugin Usage Tutorial", and everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.