足球游戏_中国足彩网￥体育资讯$

简要咨询 咨询QQ 网站导航 网站搜索 手机站点 联系我们
搜公告
  • 搜公告
  • 搜职位
公众号
事业单位
首 页
足球游戏
事业单位
特岗教师
三支一扶
银行招聘
中国足彩网
选调遴选
学历升学
公 众 号
全站导航
当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
来源：易贤网 阅读：1322 次 日期：2016-07-27 15:10:27
温馨提示：易贤网小编为您整理了“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 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>

以上就是本文的全部内容，希望对大家的学习有所帮助

中国足彩网信息请查看网络编程
【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】 【点此处查询各地各类考试咨询QQ号码及交流群】
上一篇：jQuery中deferred对象使用方法详解
下一篇：基于jQuery的ajax方法封装
易贤网手机网站地址：Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！
相关阅读网络编程
Shell中如何删除文本比较长的行的实现方法10月30日
vue.js语法及常用指令10月30日
python 读写中文json的实例详解10月30日
Objective-C Json 实例详解10月30日
bootstrap table sum总数量统计实现方法10月30日
python生成二维码的实例详解10月30日
Python批量更改文件名的实现方法10月30日
解决出现Incorrect integer value的问题10月30日
jQuery实现切换隐藏与显示同时切换图标功能10月30日
docker python api 安装配置的详解10月30日
javascript按钮禁用和启用的效果实例代码10月30日
vue.js todolist实现代码10月30日
vue.js 父向子组件传参的实例代码10月30日
apache 开启重定向 rewrite的实现方法10月30日
Vue.js划分组件的方法10月30日
python logging日志模块的详解10月30日
vue中的scope使用详解10月30日
docker cgroup 资源监控的详解10月30日
使用Android Studio 开发自己的SDK教程10月23日
linux系统下MongoDB单节点安装教程10月23日
易贤网移动网站

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
最新信息
2024年文山州富宁县残疾人联合会招聘编外人员笔试成绩及拟进入面试人员公示
2024年文山州富宁县城区卫生健康单位考调拟调动人员名单公示
2025年昆明市寻甸县教育体育系统人才引进面试成绩及拟进入下一环节人员公告
2024年昆明市寻甸县教育体育系统选调笔试成绩及拟进入资格复审人员公告
2024年文山州富宁县机关事务管理局招聘编外人员理论测试和面试成绩通告
2024年普洱市景谷县人民医院招引“银龄医师”招聘公告
2025年普洱市景谷县人民医院大学生见习岗招聘公告
2024年昭通能投物流有限责任公司第四季度招聘公告
2024年云南滇中新区招聘聘用制工作人员笔试准考证打印延期公告
2024年云南省机关事务管理局直属事业单位招聘面试成绩
公考类
云南公务员 贵州公务员 四川公务员 广西公务员 各省公务员 国家公务员 选调遴选
招聘类
事业单位 中国足彩网 特岗教师 三支一扶 志 愿 者 银行招聘 国企招聘
各类考试
学历升学 会计考试 职业资格 外语考试 医学考试 工程考试 教师资格
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号：滇ICP备2023014141号-1 足球游戏_中国足彩网￥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证：（云）人服证字（2023）第0102001523号
云南网警备案专用图标
联系电话：0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号：hfpxwx
咨询QQ：526150442（9:00—18:00）版权所有:易贤网
云南网警报警专用图标