Bootstrap支持的JavaScript插件有哪些

本篇内容介绍了“Bootstrap支持的JavaScript插件有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联专注于临泉网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供临泉营销型网站建设，临泉网站制作、临泉网页设计、临泉网站官网定制、小程序定制开发服务，打造临泉网络公司原创品牌,更为您提供临泉网站排名全网营销落地服务。

可用的js插件库：1、动画过渡“transition.js”；2、模态弹窗“modal.js”；3、下拉菜单“dropdown.js”；4、选项卡“tab.js”；5、提示框“tooltop.js”；6、警告框“alert.js”等等。

本教程操作环境：Windows7系统、bootsrap3.2版、DELL G3电脑

Bootstrap支持的JavaScript插件（库）

一次性导入：

Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。

具体使用如下（或见右侧代码编辑器28-29行）：

特别声明：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”

上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）。

模态弹出框--模态弹出窗的使用（data-参数说明）

除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop，是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示：

JavaScript触发的弹出窗代码：

$(function(){
  $(".btn").click(function(){
    $("#mymodal").modal();
  });
});

模态弹出框--JavaScript触发时的参数设置（一）

使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。

属性设置

模态弹出窗默认支持的自定义属性主要有：

比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({            keyboard:false
        });
    });
});

在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：

事件设置：

模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

调用方法也非常简单：

$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

下拉菜单（Dropdown）dropdown.js

（官方发布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js）

    W3cplus
    
        
            教程
            
                CSS3
                HTML5
                Sass
            
        
        
前端论坛
        
关于我们
    

被点击的菜单项链接或按钮需要添加自定义属性 data-toggle="dropdown"

Dropdown插件加载时，对所有带 有“data-toggle=dropdown”样式的元素绑定了事件，用户单击带有“data-toggle=dropdown”样式的链接或按钮时， 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时，下拉菜单的父容器（上面的示例是 “

$(function(){
    $(".dropdown-toggle").dropdown();
})

$(function(){
    $(".dropdown-toggle").dropdown("toggle");
})

$(".dropdown-toggle").one("click",function(){
    $(this).dropdown("toggle");
})

    公告

/*bootstrap.css文件第3758行～第3763行*/
.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}

$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})

http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-alert.min.js

    ×
    
恭喜您操作成功！

    
谨防被骗
    
请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...
    关闭

$(function(){
    $("#close").on("click",function(){        
    $(this).alert("close");
    });
});

加载

$(function(){
    $("#loaddingBtn").click(function () {
        $(this).button("loading");
      });
});

    
        男
    
    
        女
    
    
        未知
    

    
        电影
    
    
        音乐
    
    
        游戏
    
    
        摄影
    

    
除了data-ride="carousel"、data-slide、data-slide-to 以外，轮播组件还支持其他三个自定义属性：
属性名称
类型
默认值
描述
data-interval
number
5000
幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环
data-pause
string
hover
默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放
data-wrap
布尔值
true
轮播是否持续循环
图片轮播--JavaScript触发方法
默认情况之下，如果 carousel 容器上定义了 data-ride="carousel" 属性，页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下：
$(".carousel").carousel();
也可以通过容器的 ID 来指定：
$("#slidershow").carousel();
在 carousel() 方法中可以设置具体的参数，如：
属性名称
类型
默认值
描述
interval
number
5000
幻灯片轮换的等待时间（毫秒）。如果为false,轮播将不会自动开始循环
pause
string
hover
默认鼠标悬停留在幻灯片区域即停止播放，离开即开始播放
wrap
布尔值
true
轮播是否持续循环
使用时，在初始化插件的时候可以传关相关的参数，如：
$("#slidershow").carousel({
       interval: 3000
});
实际上，当我们给carousel()方法配置参数之后，轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法，简单说明如下：
.carousel("cycle")：从左向右循环播放；
.carousel("pause")：停止循环播放；
.carousel("number")：循环到指定的帧，下标从0开始，类似数组；
.carousel("prev")：返回到上一帧；
.carousel("next")：下一帧
固定定位（Affix）
插件文件：源文件 affix.js
地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-affix.js
Affix 效果常见的有以下三种：
☑ 顶部固定
☑ 侧边栏固定
☑ 底部固定
固定定位--声明式触发固定定位
Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性 data 来触发。其主要包括两个参数：
1、data-spy：取值 affix，表示元素固定不变的。
2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。
data-offset-top用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。
data-offset-bottom刚好与 data-offset-top 相反。
具体使用如下：
affix元素
分开设置 data-offset 值方式：
affix元素
我们来看一个简单的示例：

    …


    
        
            
                     …
            
        

        
                …
        

    

注意，在 body 要声明滚动监控。
运行效果如下：
注意，请在宽屏模式下查看效果。据我测试下来，使用声明式，就算设置了 data-offset-top 的值也会失效，需要在样式中给 affix 设置一个top值，与 data-offset-top 值相等。data-offset-bottom一样。
在线自定义设置--Bootstrap组件
在 Bootstrap 组件设置这一部分，提供了公共样式（Common CSS），UI 组件(Components)和 JavaScript 组件(JavaScript components)三个部分，如下图所示：
每个部分都有对应的列表清单，在自定义配置时候，可以根据自己需求进行选择，比如，我自己的 Bootstrap 框架中，不需要打印样式、code、Glyphicons、等等，那么只需要不选中它们：
“Bootstrap支持的JavaScript插件有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
            
            
            
            


            网站栏目：Bootstrap支持的JavaScript插件有哪些
            


            标题来源：http://mswzjz.cn/article/igegjj.html