In bootstrap download and installation, you can find 12 JS files in D:\Program files\nodejs\node_modules\bootstrap\js, these JS files are bootstrap with the 12 jquery plug-ins, Bootstrap.js and Bootstrap.min.js can also be found in D:\Program Files\nodejs\node_modules\bootstrap\dist\js, which contains 12 jquery plug-ins.
Among the 12 jquery plug-ins, the most commonly used are picture Carousel Carousel.js, tag switching tab.js, scrolling listening scrollspy.js, Drop-down list dropdown.js, module pop-up layer modal.js and Prompt box Tooltip.js.
(i) Picture Carousel Carousel.js
Picture Carousel can set the picture size, position and so on as needed in the CSS.
Picture Carousel needs to introduce Jquery.min.js, Carousel.js, and can also introduce transition.js to add transition effect.
<div class= "Container-fluid" > <div class= "Row" > <div class= "col-md-12" > <!--data-ride= "Carousel "Property is used to mark the carousel to start animating when the page loads--> <div data-ride=" Carousel "class=" Carousel Slide "id=" carousel-332839 "> <ol clas s= "Carousel-indicators" > <li class= "active" data-slide-to= "0" data-target= "#carousel -332839" > </li> & Lt;li data-slide-to= "1" data-target= "#carousel -332839" > </li> <li data-slide-to= "2" data-target= "# carousel-332839 "> </li> </ol> <div class=" Carousel-inner "> <div class=" Item Active "> <div "class=" > Carousel-caption 4> the Thumbnail label
(b) Label switching tab.js
Tag switching requires the introduction of Jquery.min.js, Tab.js, or the introduction of transition.js to add transition effects.
<div class= "Container-fluid" > <div class= "Row" > <div class= "col-md-12" > <div class= "tabbable" id= "tabs-440751" > <ul class= "Nav nav-tabs" > <li class= "active" > <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 class=" Tab-content "> <div class= "Tab-pane active" id= "panel-1" > <p> I ' m in section 1. </p> </div> <div class= "Tab-pane" id= "Panel-2" > <p> I ' m in section 2. </p> </div> </div> </div> </div> </div> < /div>
(iii) scrolling listening scrollspy.js and Drop-down list dropdown.js
Combine scrolling listening and Drop-down lists to make navigation bars that have a drop-down list that can be scrolled.
You need to set the style, in this case the style is:
. a,.b{
height:500px;
width:100%
}
. b{
background-color:white
}
. a{
background-color:black;
}
Need to introduce Jquery.min.js, Dropdown.js, Scrollspy.js.
<body data-spy= "Scroll" data-target= "#navbarExample" > <div class= "container-fluid" > <div class= "Row" & Gt <div class= "col-md-12" > <div id= "navbarexample" class= "NavBar" Navbar-default navbar-fixed-top "> <div cl ass= "Navbar-header" > <button type= "button" class= "Navbar-toggle" data-toggle= "Collapse" data-target= "# Bs-example-navbar-collapse-1 "> <span class=" sr-only ">toggle navigation</span><span class=" Icon-bar "></span><span class=" Icon-bar "></span><span class=" Icon-bar "></span> </button> <a class= "Navbar-brand" href= "#" >Brand</a> </div> <div class= "Collapse Navbar-co Llapse "id=" bs-example-navbar-collapse-1 "> <ul class=" Nav navbar-nav "> <li class=" active "> <a href = "#1" >Link</a> </li> <li> <a href= "#2" >Link</a> </li> <li class= "dropd Own "> <a href=" #3 "class=" Dropdown-toggle "datA-toggle= "dropdown" >dropdown<strong class= "caret" ></strong></a> <ul class= "Dropdown-menu" > <li> <a href= "#" >Action</a> </li> <li> <a href= "#" >another action& lt;/a> </li> <li> <a href= "#" >something else here</a> </li> <li class= " Divider "> </li> <li> <a href=" # ">separated link</a> </li> <li class=" di Vider "> </li> <li> <a href=" # ">one more separated link</a> </li> </ul> ; </li> </ul> <form class= "Navbar-form navbar-left" role= "search" > <div class= "Form-group" > <input type= "text" class= "Form-control" > </div> <button type= "Submit" class= "Btn Btn-default" > Su Bmit </button> </form> <ul class= "nav navbar-nav navbar-right" > <li> <a href= "#4" > Link</a> </li> <li class= "dropdown" > <a href= "#5" class= "Dropdown-toggle" data-toggle= "dropdown" >dropdown<strong class= "Caret" ></strong></a> <ul class= "Dropdown-menu" > <li> <a href= "#" >action< ;/a> </li> <li> <a href= "#" >another action</a> </li> <li> <a H ref= "#" >something else here</a> </li> <li class= "divider" > </li> <li> < A href= "#" >separated link</a> </li> </ul> </li> </ul> </div> </div& Gt </div> </div> <div class= "Row" > <!--local scroll bar listening using <div class= "col-md-12 scrollspy-example" data- spy= "Scroll" data-target= "#navbarExample" >--> <div class= "col-md-12" > <div class= "A" id= "1" ></ Div> <div class= "B" id= "2" ></div> <div class= "A" id= "3" ></div> <div class= "B" id= "4" >& Lt;/div> <div Class= "A" id= "5" ></div> </div> </div> </div> </body>
(iv) Module box pop-up layer modal.js
You need to introduce jquery.min.js, modal.js, or introduce transition.js to add transition effects.
<div class= "Container-fluid" > <div class= "Row" > <div class= "col-md-12" > <a id= "modal-732948" href = "#modal-container-732948" role= "button" class= "btn" data-toggle= "Modal" >launch demo modal</a> <div class = "Modal Fade in" id= "modal-container-732948" role= "dialog" aria-labelledby= "Mymodallabel" aria-hidden= "true" > < Div class= "Modal-dialog" > <div class= "modal-content" > <div class= "Modal-header" > <button type= "bu Tton "class=" Close "data-dismiss=" modal "aria-hidden=" true ">x</button>
(v) Cue box tooltip.js
you need to introduce jquery.min.js, tooltip.js, or introduce transition.js to add transition effects.
In addition, unlike other Plug-ins, the ToolTip plug-in is not a pure CSS plug-in. If you need to use this plugin, you must activate it using jquery.
$ (function () {$ (' [data-toggle= ' tooltip '] '). tooltip ();}); <body class= "Container" style= "padding:100px" "> <a href=" # "class=" Tooltip-test "data-toggle=" tooltip "title = "Default Tooltip" > Default tooltip</a> <br/> <a href= "#" class= "Tooltip-test" data-toggle= "Tooltip" Data-pla Cement= "left" title= "left-hand Tooltip" > left tooltip</a> <br/> <a href= "#" data-toggle= "Tooltip" Data-placement= "Top" title= "Tooltip above" > Top tooltip</a> <br/> <a href= "#" data-toggle= "Tooltip" dat a-placement= "Bottom" title= "bottom Tooltip" > Bottom of tooltip</a> <br/> <a href= "#" data-toggle= "Tooltip" dat A-placement= "right" title= "right-hand Tooltip" > right tooltip</a> <br/> <button type= "button" class= "btn Efault "data-toggle=" tooltip "title=" default tooltip > Default tooltip</button> <br/> <button type= "button" C lass= "btn Btn-default" data-toggle= "tooltip" data-placement= "left" title= "left-hand tooltip" > left Tooltip</button> <br/> <button type= "button" class= "btn Btn-default" data-toggle= "tooltip" data-placement= " Top "title=" tops Tooltip "> Top tooltip</button> <br/> <button type=" button "class=" Btn Btn-default " data-toggle= "tooltip" data-placement= "bottom" title= "bottom tooltip" > Bottom tooltip</button> <br/> < Button type= "button" class= "btn Btn-default" data-toggle= "tooltip" data-placement= "right" title= "right-hand tooltip" > right
Tooltip</button> </body>
This article has been sorted out to the "Bootstrap plug-in use Tutorial", you are welcome to learn to read.
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
