Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)

前端之家收集整理的这篇文章主要介绍了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添加过渡效果

Third Thumbnail label

Cras justo odio,egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

(二)标签切换tab.js

标签切换需要引入jquery.min.js、tab.js,也可以引入transition.js添加过渡效果

  • I'm in Section 1.

    I'm in Section 2.

    (三)滚动监听scrollspy.js和下拉列表dropdown.js

    将滚动监听和下拉列表结合起来 制作 拥有下拉列表的可以滚动监听的导航条。 需要设置样式,本例的样式为:

    需要引入jquery.min.js、dropdown.js、scrollspy.js。

    (四)模块框弹出层modal.js

    需要引入jquery.min.js、modal.js,也可以引入transition.js
    添加过渡效果

    <div class="jb51code">
    <pre class="brush:xhtml;">
    <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
    <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">
    ×

    (五)提示框tooltip.js

    需要引入jquery.min.js、tooltip.js,也可以引入transition.js添加过渡效果。

    另外,Tooltip插件不像其他插件那样,它不是纯 CSS 插件。如需使用该插件,必须使用 jquery 激活它。







    精彩专题分享

    如果大家还想深入学习,可以点击进行学习,再为大家附3个精彩的专题:

    本文已被整理到了《》,欢迎大家学习阅读。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    图片轮播提示框标签切换tab滚动监听

    猜你在找的Bootstrap相关文章