Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
在Bootstrap下载与安装后,可以在D:\ProgramFiles\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\ProgramFiles\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件。
在这12个jQuery插件中,最常用的有图片轮播carousel.js、标签切换tab.js、滚动监听scrollspy.js、下拉列表dropdown.js、模块框弹出层modal.js和提示框tooltip.js。
(一)图片轮播carousel.js
图片轮播可以根据需要在css中设置图片大小,位置等。
图片轮播需要引入jquery.min.js、carousel.js,也可以引入transition.js添加过渡效果。
<divclass="container-fluid"> <divclass="row"> <divclass="col-md-12"> <!--data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放--> <divdata-ride="carousel"class="carouselslide"id="carousel-332839"> <olclass="carousel-indicators"> <liclass="active"data-slide-to="0"data-target="#carousel-332839"> </li> <lidata-slide-to="1"data-target="#carousel-332839"> </li> <lidata-slide-to="2"data-target="#carousel-332839"> </li> </ol> <divclass="carousel-inner"> <divclass="itemactive"> <imgalt="CarouselBootstrapFirst"src="images/Chrysanthemum.jpg"/> <divclass="carousel-caption"> <h4> FirstThumbnaillabel </h4> <p> Crasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportagravidaategetmetus.Nullamiddoloridnibhultriciesvehiculautidelit. </p> </div> </div> <divclass="item"> <imgalt="CarouselBootstrapSecond"src="images/Desert.jpg"/> <divclass="carousel-caption"> <h4> SecondThumbnaillabel </h4> <p> Crasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportagravidaategetmetus.Nullamiddoloridnibhultriciesvehiculautidelit. </p> </div> </div> <divclass="item"> <imgalt="CarouselBootstrapThird"src="images/Hydrangeas.jpg"> <divclass="carousel-caption"> <h4> ThirdThumbnaillabel </h4> <p> Crasjustoodio,dapibusacfacilisisin,egestasegetquam.Donecidelitnonmiportagravidaategetmetus.Nullamiddoloridnibhultriciesvehiculautidelit. </p> </div> </div> </div><aclass="leftcarousel-control"href="#carousel-332839"data-slide="prev"><spanclass="glyphiconglyphicon-chevron-left"></span></a><aclass="rightcarousel-control"href="#carousel-332839"data-slide="next"><spanclass="glyphiconglyphicon-chevron-right"></span></a> </div> </div> </div> </div>
(二)标签切换tab.js
标签切换需要引入jquery.min.js、tab.js,也可以引入transition.js添加过渡效果。
<divclass="container-fluid"> <divclass="row"> <divclass="col-md-12"> <divclass="tabbable"id="tabs-440751"> <ulclass="navnav-tabs"> <liclass="active"> <ahref="#panel-1"data-toggle="tab">Section1</a> </li> <li> <ahref="#panel-2"data-toggle="tab">Section2</a> </li> </ul> <divclass="tab-content"> <divclass="tab-paneactive"id="panel-1"> <p> I'minSection1. </p> </div> <divclass="tab-pane"id="panel-2"> <p> I'minSection2. </p> </div> </div> </div> </div> </div> </div>
(三)滚动监听scrollspy.js和下拉列表dropdown.js
将滚动监听和下拉列表结合起来制作拥有下拉列表的可以滚动监听的导航条。
需要设置样式,本例的样式为:
.a,.b{ height:500px; width:100%; } .b{ background-color:white; } .a{ background-color:black; }
需要引入jquery.min.js、dropdown.js、scrollspy.js。
<bodydata-spy="scroll"data-target="#navbarExample"> <divclass="container-fluid"> <divclass="row"> <divclass="col-md-12"> <divid="navbarExample"class="navbarnavbar-defaultnavbar-fixed-top"> <divclass="navbar-header"> <buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"> <spanclass="sr-only">Togglenavigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span> </button><aclass="navbar-brand"href="#">Brand</a> </div> <divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"> <ulclass="navnavbar-nav"> <liclass="active"> <ahref="#1">Link</a> </li> <li> <ahref="#2">Link</a> </li> <liclass="dropdown"> <ahref="#3"class="dropdown-toggle"data-toggle="dropdown">Dropdown<strongclass="caret"></strong></a> <ulclass="dropdown-menu"> <li> <ahref="#">Action</a> </li> <li> <ahref="#">Anotheraction</a> </li> <li> <ahref="#">Somethingelsehere</a> </li> <liclass="divider"> </li> <li> <ahref="#">Separatedlink</a> </li> <liclass="divider"> </li> <li> <ahref="#">Onemoreseparatedlink</a> </li> </ul> </li> </ul> <formclass="navbar-formnavbar-left"role="search"> <divclass="form-group"> <inputtype="text"class="form-control"> </div> <buttontype="submit"class="btnbtn-default"> Submit </button> </form> <ulclass="navnavbar-navnavbar-right"> <li> <ahref="#4">Link</a> </li> <liclass="dropdown"> <ahref="#5"class="dropdown-toggle"data-toggle="dropdown">Dropdown<strongclass="caret"></strong></a> <ulclass="dropdown-menu"> <li> <ahref="#">Action</a> </li> <li> <ahref="#">Anotheraction</a> </li> <li> <ahref="#">Somethingelsehere</a> </li> <liclass="divider"> </li> <li> <ahref="#">Separatedlink</a> </li> </ul> </li> </ul> </div> </div> </div> </div> <divclass="row"> <!--局部滚动条监听时使用 <divclass="col-md-12scrollspy-example"data-spy="scroll"data-target="#navbarExample">--> <divclass="col-md-12"> <divclass="a"id="1"></div> <divclass="b"id="2"></div> <divclass="a"id="3"></div> <divclass="b"id="4"></div> <divclass="a"id="5"></div> </div> </div> </div> </body> </html>
(四)模块框弹出层modal.js
需要引入jquery.min.js、modal.js,也可以引入transition.js添加过渡效果。
<divclass="container-fluid"> <divclass="row"> <divclass="col-md-12"> <aid="modal-732948"href="#modal-container-732948"role="button"class="btn"data-toggle="modal">Launchdemomodal</a> <divclass="modalfadein"id="modal-container-732948"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"> <divclass="modal-dialog"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close"data-dismiss="modal"aria-hidden="true"> × </button> <h4class="modal-title"id="myModalLabel"> Modaltitle </h4> </div> <divclass="modal-body"> ... </div> <divclass="modal-footer"> <buttontype="button"class="btnbtn-default"data-dismiss="modal"> Close </button> <buttontype="button"class="btnbtn-primary"> Savechanges </button> </div> </div> </div> </div> </div> </div> </div>
(五)提示框tooltip.js
需要引入jquery.min.js、tooltip.js,也可以引入transition.js添加过渡效果。
另外,Tooltip插件不像其他插件那样,它不是纯CSS插件。如需使用该插件,必须使用jquery激活它。
$(function(){$("[data-toggle='tooltip']").tooltip();}); <bodyclass="container"style="padding:100px;"> <ahref="#"class="tooltip-test"data-toggle="tooltip" title="默认的Tooltip">默认的Tooltip</a><br/> <ahref="#"class="tooltip-test"data-toggle="tooltip" data-placement="left"title="左侧的Tooltip">左侧的Tooltip</a><br/> <ahref="#"data-toggle="tooltip"data-placement="top" title="顶部的Tooltip">顶部的Tooltip</a><br/> <ahref="#"data-toggle="tooltip"data-placement="bottom" title="底部的Tooltip">底部的Tooltip</a><br/> <ahref="#"data-toggle="tooltip"data-placement="right" title="右侧的Tooltip">右侧的Tooltip</a><br/> <buttontype="button"class="btnbtn-default"data-toggle="tooltip" title="默认的Tooltip">默认的Tooltip</button><br/> <buttontype="button"class="btnbtn-default"data-toggle="tooltip" data-placement="left"title="左侧的Tooltip">左侧的Tooltip</button><br/> <buttontype="button"class="btnbtn-default"data-toggle="tooltip" data-placement="top"title="顶部的Tooltip">顶部的Tooltip</button><br/> <buttontype="button"class="btnbtn-default"data-toggle="tooltip" data-placement="bottom"title="底部的Tooltip">底部的Tooltip</button><br/> <buttontype="button"class="btnbtn-default"data-toggle="tooltip" data-placement="right"title="右侧的Tooltip">右侧的Tooltip</button> </body>
精彩专题分享:jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
BootstrapTable使用教程
本文已被整理到了《Bootstrap插件使用教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。