您现在的位置是:主页 > Web前端技术 > Web前端技术

Bootstrap支持的JavaScript插件有哪些

IDCBT2021-12-30服务器技术人已围观

简介本篇内容介绍了“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版本库,因为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”

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

模态弹出框--模态弹出窗的使用(data-参数说明)

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

JavaScript触发的弹出窗代码:

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

标签:

很赞哦! ()

本栏推荐