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

前端技术 2023/09/09 JavaScript

在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 class=\"container-fluid\">
 <div class=\"row\">
  <div class=\"col-md-12\">
  <!-- data-ride=\"carousel\" 属性用于标记轮播在页面加载时就开始动画播放 -->
  <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>

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

<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>

 （三）滚动监听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 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\">
 <!-- 局部滚动条监听时使用
 <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>

（四）模块框弹出层modal.js 
需要引入jquery.min.js、modal.js，也可以引入transition.js添加过渡效果。 

<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>

 （五）提示框tooltip.js
需要引入jquery.min.js、tooltip.js，也可以引入transition.js添加过渡效果。 

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

$(function () { $(\"[data-toggle=\'tooltip\']\").tooltip(); });
 <body class=\"container\" style=\"padding: 100px;\" >
  <a href=\"#\" class=\"tooltip-test\" data-toggle=\"tooltip\" 
  title=\"默认的 Tooltip\">默认的 Tooltip</a>  <br/>
  <a href=\"#\" class=\"tooltip-test\" data-toggle=\"tooltip\" 
  data-placement=\"left\" title=\"左侧的 Tooltip\">左侧的 Tooltip</a>  <br/>
  <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"top\" 
  title=\"顶部的 Tooltip\">顶部的 Tooltip</a>  <br/>
  <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"bottom\" 
  title=\"底部的 Tooltip\">底部的 Tooltip</a>  <br/>
  <a href=\"#\" data-toggle=\"tooltip\" data-placement=\"right\" 
  title=\"右侧的 Tooltip\">右侧的 Tooltip</a>  <br/>
  <button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" 
  title=\"默认的 Tooltip\">默认的 Tooltip</button>  <br/>
  <button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" 
  data-placement=\"left\" title=\"左侧的 Tooltip\">左侧的 Tooltip</button>  <br/>
  <button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" 
  data-placement=\"top\" title=\"顶部的 Tooltip\">顶部的 Tooltip</button>  <br/>
  <button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" 
  data-placement=\"bottom\" title=\"底部的 Tooltip\">底部的 Tooltip</button>  <br/>
  <button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" 
  data-placement=\"right\" title=\"右侧的 Tooltip\">右侧的 Tooltip</button>
</body>

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

本文地址：https://www.stayed.cn/item/24832

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案