| 标题 | Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等) |
| 内容 | 在Bootstrap下载与安装后，可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件，这些JS文件是Bootstrap自带的12个jQuery插件，也可以在D:\Program Files\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添加过渡效果。 <div> <div> <div> <!-- data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放 --> <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, 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/Hydrangeas.jpg"> <div> <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 href="#carousel-332839" data-slide="prev"><span></span></a> <a href="#carousel-332839" data-slide="next"><span></span></a> </div> </div> </div> </div> （二）标签切换tab.js 标签切换需要引入jquery.min.js、tab.js，也可以引入transition.js添加过渡效果。 <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> （三）滚动监听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。 <body data-spy="scroll" data-target="#navbarExample"> <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> </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> </li> <li> <a href="#">Separated link</a> </li> <li> </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> </ul> </li> </ul> </div> </div> </div> </div> <div> <!-- 局部滚动条监听时使用 <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> </body> </html> （四）模块框弹出层modal.js 需要引入jquery.min.js、modal.js，也可以引入transition.js添加过渡效果。 <div> <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> （五）提示框tooltip.js 需要引入jquery.min.js、tooltip.js，也可以引入transition.js添加过渡效果。 另外，Tooltip插件不像其他插件那样，它不是纯 CSS 插件。如需使用该插件，必须使用 jquery 激活它。 $(function () { $("[data-toggle='tooltip']").tooltip(); }); <body > <a href="#" data-toggle="tooltip" >默认的 Tooltip</a> <br/> <a href="#" data-toggle="tooltip" data-placement="left">左侧的 Tooltip</a> <br/> <a href="#" data-toggle="tooltip" data-placement="top" >顶部的 Tooltip</a> <br/> <a href="#" data-toggle="tooltip" data-placement="bottom" >底部的 Tooltip</a> <br/> <a href="#" data-toggle="tooltip" data-placement="right" >右侧的 Tooltip</a> <br/> <button type="button" data-toggle="tooltip" >默认的 Tooltip</button> <br/> <button type="button" data-toggle="tooltip" data-placement="left">左侧的 Tooltip</button> <br/> <button type="button" data-toggle="tooltip" data-placement="top">顶部的 Tooltip</button> <br/> <button type="button" data-toggle="tooltip" data-placement="bottom">底部的 Tooltip</button> <br/> <button type="button" data-toggle="tooltip" data-placement="right">右侧的 Tooltip</button> </body> 以上就是本文的全部内容，希望对大家的学习有所帮助 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。