Summary of Bootstrap's most commonly used JS plug in series (picture carousel tag switching etc.)
- 2021-07-02 23:31:22
- OfStack
After Bootstrap is downloaded and installed, you can find 12 JS files in D:\ Program Files\ nodejs\ node_modules\ bootstrap\ js, the 12 jQuery plug-ins that come with Bootstrap, or bootstrap. js and bootstrap. min. js in D:\ Program Files\ nodejs\ node_modules\ bootstrap\ dist\ js, both of which contain 12 jQuery plug-ins.
Among the 12 jQuery plug-ins, the most commonly used ones are picture carousel carousel. js, tag switching tab. js, scrolling monitoring scrollspy. js, drop-down list dropdown. js, module box pop-up layer ES40js and prompt box tooltip. js.
(1) Picture carousel carousel. js
Picture carousel can set the picture size and position in css as needed.
Picture carousel needs to introduce jquery.min.js, carousel.js, or 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 animation playing when the page loads -->
<div data-ride="carousel" class="carousel slide" id="carousel-332839">
<ol class="carousel-indicators">
<li class="active" 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 class="carousel-inner">
<div class="item active">
<img alt="Carousel Bootstrap First" src="images/Chrysanthemum.jpg" />
<div class="carousel-caption">
<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 class="item">
<img alt="Carousel Bootstrap Second" src="images/Desert.jpg"/>
<div class="carousel-caption">
<h4>
Second 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 class="item">
<img alt="Carousel Bootstrap Third" src="images/Hydrangeas.jpg">
<div class="carousel-caption">
<h4>
Third 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> <a class="left carousel-control" href="#carousel-332839" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-332839" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
(2) Tag switching tab. js
Tag switching needs to introduce jquery. min. js, tab. js, or transition. js to add transition effect.
<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>
(3) Scroll for scrollspy. js and drop-down list dropdown. js
Combine scroll listeners with drop-down lists to create a scroll listener navigation bar with a drop-down list.
You need to set a style. The style in 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 class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="navbarExample" class="navbar navbar-default navbar-fixed-top" >
<div class="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-collapse" 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="dropdown">
<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</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link</a>
</li>
<li class="divider">
</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">
Submit
</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 href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Use when local scroll bar listening
<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"></div>
<div class="a" id="5"></div>
</div>
</div>
</div>
</body>
</html>
(4) Module box pop-up layer modal. js
It is necessary to introduce jquery. min. js, modal. js, or transition. js to add transition effect.
<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="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
(5) Prompt box tooltip. js
It is necessary to introduce jquery. min. js, tooltip. js, or transition. js to add transition effect.
In addition, unlike other plug-ins, the Tooltip plug-in is not a pure CSS plug-in. To use this plug-in, 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-placement="left" title=" Left-sided Tooltip"> Left-sided Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="top"
title=" Top Tooltip"> Top Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="bottom"
title=" Bottom Tooltip"> Bottom Tooltip</a> <br/>
<a href="#" data-toggle="tooltip" data-placement="right"
title=" Right-sided Tooltip"> Right-sided Tooltip</a> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
title=" Default Tooltip"> Default Tooltip</button> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title=" Left-sided Tooltip"> Left-sided Tooltip</button> <br/>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title=" Top 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-sided Tooltip"> Right-sided Tooltip</button>
</body>
Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
If you want to study in depth, you can click here to study, and then attach three wonderful topics for you:
Bootstrap Learning Tutorial
Bootstrap Practical Course
Bootstrap Table Using Tutorial
This article has been sorted into the "Bootstrap plug-in tutorial", welcome to learn to read.