导入JavaScript插件

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

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

一次性导入:

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

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

<!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件(压缩版本) -->
<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. Away3d 骨骼动画优化

    很多朋友说Away3D 的骨骼数限制在32根,确切的说应该是Stage3D 的限制.在 AGAL2.0之前 VC寄存器是128个,每个vc常量寄存器最大只能容纳4位,transform占用一个4*4的 ...

  2. Apache SSL服务器配置SSL详解(转)

    1.安装必要的软件 引用 我用的是apahce2.0.61版,可以直接官方提供的绑定openssl的apache. 文件名是:apache_2.0.61-win32-x86-openssl-0.9.7 ...

  3. Linux堆内存管理深入分析--阿里聚安全

    http://www.freebuf.com/author/%E9%98%BF%E9%87%8C%E8%81%9A%E5%AE%89%E5%85%A8

  4. Java基础知识强化之集合框架笔记34:List练习之集合的嵌套遍历

    1. 需求: 我们班有学生,每一个学生是不是一个对象.所以我们可以使用一个集合表示我们班级的学生.ArrayList<Student> 但是呢,我们旁边是不是还有班级,每个班级是不是也是一 ...

  5. UICollectionView reloadData后cell被隐藏

    在使用UICollectionView的页面执行: [self.collectionView reloadData]; 执行后,页面变为空白页,调试发现,执行reloadData 后UICollect ...

  6. 使用PuTTY在Windows中向Linux上传文件

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3843207.html ...

  7. 发现并认为这是jQuery1.4.4的一个Bug

    说起来还觉得丢人,公司的系统开发了两年,目前jquery的版本还是用的1.4.4. mantis上的Bug一堆,今天在改bug的时候发现一个jQuery的Bug. 改bug嘛,一开始总是各种调试,总感 ...

  8. hdu 5073 Galaxy

    题意是给定n个点,让求找到一个点p使得sigma( (a[i] - p) ^ 2 ) 最小,其中a[i]表示第i个点的位置.其中有k个点不用算. 思路:发现这道题其实就是求n-k个点方差. 那么推一下 ...

  9. jdk配置及maven配置

    jdk配置及maven配置 >>>>>>>>>>>>>>>>>>>>>&g ...

  10. jQuery失去焦点的时候注册验证

    //注册验证$('form :input').blur(function () { if ($("#txtName").val() == "") { $(&qu ...