Bootstrap支持的JavaScript插件有哪些

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

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

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

Bootstrap支持的JavaScript插件有哪些

本教程操作环境: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弹出窗自定义属性相关说明如下所示:

Bootstrap支持的JavaScript插件有哪些

JavaScript触发的弹出窗代码:

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

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

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

属性设置

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

Bootstrap支持的JavaScript插件有哪些

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

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

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

参数

使用方法

描述

toggle

$(“#mymodal”).modal(“toggle”)

触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示

show

$(“#mymodal”).modal(“show”)

触发时,显示模态弹出窗

hide

$(“#mymodal”).modal(“hide”)

触发时,关闭模态弹出窗

事件设置:

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

事件类型

描述

show.bs.modal

在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性

shown.bs.modal

该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件

hide.bs.modal

在hide方法调用时(但还未关闭隐藏)立即触发

hidden.bs.modal

该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发

调用方法也非常简单:

$('#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”样式的链接或按钮时,下拉菜单的父容器(上面的示例是 “

        
  • 规则
  •     
  • 论坛
  •     
  • 安全
  •     
  • 公益
  •     公告内容面板

        规则内容面板

        论坛内容面板

        安全内容面板

        公益内容面板

    关键一点,选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。

    在Bootstrap框架中选项卡nav-tabs已带有样式,前面在介绍导航一节中有详细介绍。而对于面板内容tab-pane都是隐藏的,只有当前面板内容才是显示的:

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

    选项卡--触发切换效果

    同样的,选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求:
     1、选项卡导航链接中要设置 data-toggle="tab"

    2、并且设置 data-target="对应内容面板的选择符(一般是ID)";

    如果是链接的话,还可以通过 href="对应内容面板的选择符(一般是ID)"

    主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

    3、面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与选项卡中的 data-target 或 href 的值匹配。

    选项卡--为选择卡添加fade样式

    为了让面板的隐藏与显示在切换的过程效果更流畅,可以在面板中添加类名 fade,让其产生渐入的效果。

    选项卡--胶囊式选项卡(nav-pills)

    在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外,还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills,另外关键一点是将 data-toggle="tab"换成data-toggle="pill"

    调用方法:

    在每个链接的单击事件中调用tab("show")方法,显示对应的标签面板内容。针对上面的示例,删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性,然后通过下面的脚本来调用:

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

    提示框(Tooltip)

    插件源文件:tooltip.js

    (引用地址:

    Bootstrap支持的JavaScript插件有哪些

    提示框--结构

    Bootstrap框架中的tooltip的插件提供了四种不同的风格:

    提示信息在左边:

    Bootstrap支持的JavaScript插件有哪些

    在Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮

    提示框--其他的自定义属性

    除此之外,提示框还有其他的自定义属性,每个自定义属性都具自身存在的意义,如下表所示:

    Bootstrap支持的JavaScript插件有哪些

    提示框--JS设置参数方法

    除了在 html 代码中使用 data- 设置提示框参数,还可以使用 JavaScript 来设置提示框参数,主要包括:

    Bootstrap支持的JavaScript插件有哪些

    弹出框(Popover)

    插件源文件:popover.js

    (引用地址:

    样式文件:

    ☑ LESS版本:对应的源文件是 popovers.less

    ☑ Sass版本:对应的源文件是 _popovers.scss

    ☑ 编译后的Bootstrap:对应bootstrap.css文件第5595行~第5714行

    弹出框(Popover)仅从外表上看,和前面介绍的提示框(Tooltip)长得差不多,如下所示:

    Bootstrap支持的JavaScript插件有哪些

    不同的是:弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。而对于两者有何区别呢?稍后我们会介绍,先来了解如何制作Bootstrap框架中的弹出框。

    弹出框--自定义结构属性

    同样在弹出框制作时,可以在HTML中定义下表所列的自定义属性:

    Bootstrap支持的JavaScript插件有哪些

    弹出框--提示框和弹出框的异同

    从之前的学习可知,弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同,只不过在其基础上增加了一个 data-content 属性,用来设置弹出框的内容。其实两插件也有略微的不同:

    警告框(Alert)

    插件源文件:alert.js

    引用地址:

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

    Bootstrap支持的JavaScript插件有哪些

    警告框--使用声明式触发警告框

    如果通过自定义的HTML属性(声明式)来触发警告框,需要在关闭按钮上设置自定义属性data-dismiss="alert",如下所示:

    
        ×
        

    恭喜您操作成功!

    运行效果如下:

    Bootstrap支持的JavaScript插件有哪些

    点击X会关闭整个警告框。

    其实关闭按钮,不一定非要用X号,也可以是普通的按钮元素或者链接元素,只需要保证关闭元素带有自定义属性data-dismiss="alert"即可

    警告框--JavaScript触发警告框

    除了通过自定义data-dismiss="alert"属性来触发警告框关闭之外,还可以通过JavaScript方法。只需要在关闭按钮上绑定一个事件。如下所示:

    html代码:

    
        
    谨防被骗
        

    请确认您转账的信息是你的亲朋好友,不要轻意相信不认识的人...

        关闭

    通过下面的JavaScript代码来触发:

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

    运行效果如下:

    Bootstrap支持的JavaScript插件有哪些

    按钮插件(Button)

    插件源文件:button.js

    引用地址:

    按钮插件--按钮加载状态

    通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息。例如,点击“加载”按钮,会触发按钮的加载的状态。如下所示:

    加载

    通过data-loading-text属性定义加载的文本信息,然后通过JavaScript给按钮绑定一个事件,并给按钮添加一个button("loading")方法来激活按钮的加载状态行为。如下所示:

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

    运行效果如下:

    点击前:

    Bootstrap支持的JavaScript插件有哪些

    点击后:

    Bootstrap支持的JavaScript插件有哪些

    按钮插件--模拟单选择按钮

    模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组,能够让设计更具个性化,可以定制出更美观的单选按钮组。
    在Bootstrap框架中按钮插件中,可以通过给按钮组自定义属性data-toggle="buttons",如下所示:

    
        
            男
        
        
            女
        
        
            未知
        
    

    运行效果如下:

    Bootstrap支持的JavaScript插件有哪些

    按钮插件--模拟复选按钮

    使用按钮组来模拟复选按钮和模拟单选按钮是一样的,具有同等效果,也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是,将input[type="radio"]换成input[type="checkbox"],如下所示:

    
        
            电影
        
        
            音乐
        
        
            游戏
        
        
            摄影
        
    

    运行效果如下:

    Bootstrap支持的JavaScript插件有哪些

    手风琴(Collapse)

    插件源文件:collapse.js

    引用地址:

    Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题,可以让其对应的内容显示或隐藏。如下图所示:

    Bootstrap支持的JavaScript插件有哪些

    图片轮播(Carousel)

    插件对应的文件:carousel.js

    引用地址:

    要显示的效果就是多幅图片轮回播放,如下图所示:

    Bootstrap支持的JavaScript插件有哪些

    上面的轮播效果是6张广告图从右向左播放,鼠标悬停在图片时会暂停播放,如果鼠标悬停或单击右下角圆点时,会显示对应的图片。这种图片轮播效果,在Bootstrap框架中是通过Carousel插件来实现,在下面小节中我们将要介绍的是如何使用Carouse插件实现图片轮播效果。

    第一步:设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式,并且给这个容器定义一个 ID 值,方便后面采用 data 属性来声明触发。

    第二步:设计轮播图片计数器。在容器 p.carousel 的内部添加轮播图片计算器,采用 carousel-indicators 样式,其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li),一般采用有顺列表来制作:

    
    
        

    除了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 要声明滚动监控。

    运行效果如下:

    Bootstrap支持的JavaScript插件有哪些

    注意,请在宽屏模式下查看效果。据我测试下来,使用声明式,就算设置了 data-offset-top 的值也会失效,需要在样式中给 affix 设置一个top值,与 data-offset-top 值相等。data-offset-bottom一样。

    在线自定义设置--Bootstrap组件

    在 Bootstrap 组件设置这一部分,提供了公共样式(Common CSS),UI 组件(Components)和 JavaScript 组件(JavaScript components)三个部分,如下图所示:

    Bootstrap支持的JavaScript插件有哪些

    每个部分都有对应的列表清单,在自定义配置时候,可以根据自己需求进行选择,比如,我自己的 Bootstrap 框架中,不需要打印样式、code、Glyphicons、等等,那么只需要不选中它们:

    Bootstrap支持的JavaScript插件有哪些

    “Bootstrap支持的JavaScript插件有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


    分享文章:Bootstrap支持的JavaScript插件有哪些
    新闻来源:
    http://scyanting.com/article/igegjj.html