bootstrap js插件

导入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”

时间: 2024-12-27 01:02:17

bootstrap js插件的相关文章

bootstrap/jQuery插件

基础组件:jquery,bootstrap.css,bootstrap.js 插件: 下拉框bootstrap-select 富文本编辑器summernote(jQuery) 输入校验bootstrapValidator 客户端模板mustache 翻页jquery.twbsPagination(jQuery) 页签  tab.js(包含在bootstrap.js里) css <link href="../../Content/bootstrap.css" rel="s

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

加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入CSS文件和JS文件 <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"></script&

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

对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js 文件,就无需再单独将其引入了. Transition.js 是针对 transitionEnd 事件的一个基本辅助工具,也是对 CSS 过渡效果的模拟.它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果. 通过代码啦展现一下 先创建一个有id的div,这里div的id为mydiv,内容直接为空 <div id="mydiv"&

Bootstrap的js插件之轮播(carousel)

轮播请查看以下示例,基本已经涵盖最常用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>js插件_轮播</titl

BootStrap之基础-4 插件(JS插件)

一.JS插件 概览 - 脚本引用 - 依赖于jQuery - 单个引用 - 全部引用 - 调用方式 - data属性 - 编程方式 - 事件 - e.preventDefault() 模态框 - 以弹出对话框的形式出现 工具提示 - tooltip.js 弹出框 - 弹出框依赖 工具提示插件 过滤效果 - transaction.js - CSS过渡 下拉菜单 滚动监听 标签页 警告框 按钮 折叠框 轮播 附加菜单 总结:本章内容主要介绍了 BootStrap 插件(JS插件)

Bootstrap transition.js 插件详解

Bootstrap transition.js 插件详解 时间 2015-01-27 12:12:00 博客园-原创精华区 原文  http://www.cnblogs.com/xyzhanjiang/p/4252513.html 主题 Bootstrap JavaScript Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡

玩转Bootstrap(JS插件篇)

模态弹出框 一次性导入: 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&qu

关于Bootstrap之JS插件模态框的重要注意事项

用modal.js插件的模态框时,根据参考文档写下了如下代码: $('#myModal').modal('toggle').on('shown.bs.modal', function (e) { //TODO something }); 运行结果: chrome正常! IE8+(低版本没试)不响应事件,竟然不响应事件! >>排查步骤: 翻看文档,看有没有介绍此处存在兼容问题,结果没有: 既然不存在兼容问题,就是代码的编写问题了,问题变得好办了,顺序翻转: $('#myModal').on('s

bootstrap框架--js插件

javascript的js文件可以单个引入,也可以一次性全部引入,不过无论是哪种引入方式,都是依赖于jquery(1.9.1以上),所以要先插入jquery再引入js插件 data属性指向的是js单个插件名,例如data-toggle="dropdown",指向的是下拉菜单这个js插件 transition: 模态框 轮播图 选项卡 折叠 动画过度