导入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. 【转载】nginx 并发数问题思考:worker_connections,worker_processes与 max clients

    注:这个文章主要是作者一直在研究nginx作为http server和反向代理服务器时候所谓最大的max_clients和 worker_connections的计算公式, 其实最后的结论也没有卡上公 ...

  2. 【课程分享】Oracle数据库系统project师

    对这个课程有兴趣的朋友能够加我的QQ2059055336和我联系 一.本课程是怎么样的一门课程 1.1.课程的背景 该课程是Oracle数据库系统project师培训课程 Oracle Databas ...

  3. java websocket工具

    https://github.com/dzharvis/servlet-websocket-server http://redstarofsleep.iteye.com/blog/1488639 ht ...

  4. Qt 学习之路:输入元素

    前面的章节中,我们看到了作为输入元素的MouseArea,用于接收鼠标的输入.下面,我们再来介绍关于键盘输入的两个元素:TextInput和TextEdit. TextInput是单行的文本输入框,支 ...

  5. 常用Content-type汇总

    Content-Type,内容类型,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式.什么编码读取这个文件.这里汇总一下常用的,所有资料来源于网络,未经测试:  文件后缀 处理方式  .* ...

  6. FreeCodeCamp 的 Basic Algorithm Scripting 题解(1)

    这是本人的原创文章,转载请注明原文链接http://www.cnblogs.com/wusuowiaaa1blog/p/5932121.html. 1.Reverse a String 翻转字符串 先 ...

  7. Writing Your First Test

    Let's say you have an activity layout that represents a welcome screen: <?xml version="1.0&q ...

  8. JAVA 安装与配置

    JDK是整个java的核心,包括java的运行环境.java工具和java基础类库. 一.安装JDK 获得JDK,登录oracle网站http://www.oracle.com/technetwork ...

  9. asp.net 自动遍历实体类

    最近做项目需要读取修改前数据库中被修改的数据所有的信息,一开始想要在model层的每个类都写一个函数return一串字符串, 但是由于表太多,实体类数量太大,写出来太浪费时间,所以决定写一个通用的方法 ...

  10. .Net framework.

    Figure 1 - .Net Framework The Common Language Runtime (CLR) is the mechanism through which .NET code ...