导入JavaScript插件

Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。

Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库。

一次性导入:

Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js)。

具体使用如下(或见右侧代码编辑器28-29行):

  1. <!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery -->
  2. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  3. <!—- 一次性导入所有Bootstrap的JavaScript插件(压缩版本) -->
  4. <script src="js/bootstrap.min.js"></script>

特别声明:jQuery版本库也可以加载你本地的jQuery版本。

单独导入:

为方便单独导入特效文件,Bootstrap V3.2中提供了12种JavaScript插件,他们分别是:

☑ 动画过渡(Transitions):对应的插件文件“transition.js”

☑ 模态弹窗(Modal):对应的插件文件“modal.js”

☑ 下拉菜单(Dropdown):对应的插件文件“dropdown.js”

☑ 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js”

☑ 选项卡(Tab):对应的插件文件“tab.js”

☑ 提示框(Tooltips):对应的插件文件“tooltop.js”

☑ 弹出框(Popover):对应的插件文件“popover.js”

☑ 警告框(Alert):对应的插件文件“alert.js”

☑ 按钮(Buttons):对应的插件文件“button.js”

☑ 折叠/手风琴(Collapse):对应的插件文件“collapse.js”

☑ 图片轮播Carousel:对应的插件文件“carousel.js”

☑ 自动定位浮标Affix:对应的插件文件“affix.js”

bootstrap js插件的更多相关文章

  1. bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

  2. Bootstrap transition.js 插件

    Bootstrap transition.js 插件详解   Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就 ...

  3. 【转】bootstrap 的 affix.js 插件

    我觉得 Twitter Bootstrap 提供的 JavaScript 插件可用性非常高,但文档多数简单.按部就班操作了,有效果当然好,没效果的话简直不知道为什么.之前我写过 Scrollspy 用 ...

  4. Bootstrap入门(三十)JS插件7:警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

  5. Bootstrap入门(二十九)JS插件6:弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  6. Bootstrap入门(二十八)JS插件5:工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

  7. Bootstrap入门(二十七)JS插件4:标签页

    Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...

  8. Bootstrap入门(二十五)JS插件2:过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  9. Bootstrap入门(二十三)JS插件1:模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

随机推荐

  1. 手把手教你mysql(十)索引

    手把手教你mysql(十)索引 一:索引的引入 索引定义:索引是由数据库表中一列或者多列组合而成,其作用是提高对表中数据的查询速度. 类似于图书的目录,方便快速定位,寻找指定的内容,如一本1000页的 ...

  2. tableview: 实现tableview 的 section header 跟随tableview滑动

    方法一:(只有一个headerView)一段 如果你的tableview恰好只有一个headerView,实现这种效果就好办了.把要设置的headerView设置成tableView的header而不 ...

  3. 【Android - 框架】之GreenDao的使用

    上一篇博客([Android - 框架]之ORMLite的使用)中介绍了ORMLite的基本使用,今天我们来研究以下GreenDao的使用. GreenDao和ORMLite一样,都是基于ORM(Ob ...

  4. Python基础知识---字典

    现在在实习期间,好久没用Python了,今天在做Java项目时用的HashMap让我联想到了Python中的字典,就写一些Python字典的知识吧,复习复习. 字典:  key --> valu ...

  5. Memo打印1

              Delphi 打印Memo里面的内容 实现的功能和记事本的打印的功能一样 打印保存为文件时此时的文件名如何设置? 当Memo里的文本数量巨大时 窗体正在打印会出现点数字显示问题 闪 ...

  6. [RxJS] Combination operator: zip

    CombineLatest and withLatestFrom are both AND-style combination operators. In this lesson, we will l ...

  7. android自定义控件,动态设置Button的样式

    原文  http://www.cnblogs.com/landptf/p/4562203.html 今天来看一个通过重写Button来动态实现一些效果,如圆角矩形.圆形.按下改变字体,改变背景色,改变 ...

  8. MongoDB 安装与启动

    一.MongoDB简单介绍 MongoDB是一个高性能,开源.无模式的文档型数据库.是当前NoSql数据库中比較热门的一种.它在很多场景下可用于替代传统的关系型数据库或键/值存储方式. Mongo使用 ...

  9. android 36 线程通信

    安卓中一个程序跑起来叫进程,进程中至少有一个主线程.主线程用于处理用户的触摸操作和将触摸操作事件分发给响应的控件.如果进行消耗时间操作,下载,磁盘读取文件,不润许在主线程操作,只能在工作线程操作.主线 ...

  10. linux ptrace I

    这几天通过<游戏安全--手游安全技术入门这本书>了解到linux系统中ptrace()这个函数可以实现外挂功能,于是在ubuntu 16.04 x86_64系统上对这个函数进行了学习. 参 ...