Bootstrap 的 JavaScript 插件

最新推荐文章于 2022-04-12 22:23:44 发布

大大大大大桃子

最新推荐文章于 2022-04-12 22:23:44 发布

阅读量1k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/soindy/article/details/67638558

版权

本文详细介绍了Bootstrap中的12种JavaScript插件，包括动画过渡、模态弹出框、下拉菜单、滚动监控器、选项卡、提示框、弹出框、警告框、按钮、手风琴、图片轮播和固定定位。每个插件的使用方法、结构分析、实现原理和相关示例代码均有详尽阐述，帮助开发者更好地理解和应用Bootstrap的JavaScript功能。

摘要由CSDN通过智能技术生成

整理自慕课笔记
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”

动画过渡（Transitions）

transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果。
默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：
* 模态弹出窗（Modal）的滑动和渐变效果；
* 选项卡（Tab）的渐变效果；
* 警告框（Alert）的渐变效果；
* 图片轮播（Carousel）的滑动效果。

模态弹出框（Modals）

使用

<body>
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
  $(function(){
    
    $(".btn").click(function(){
    
      $("#mymodal").modal("toggle");
    });
  });
</script>
</body>

结构分析

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：
* 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
* 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
* 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮
模态弹出窗的结构如下:


<div class="modal show">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

实现原理

bootstrap中的“模态弹出框”有以下几个特点：
1、模态弹出窗是固定在浏览器中的。
2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。
3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。

详见这里: Bootstrap 模态弹出框（Modals）

下拉菜单（Dropdown）

和模态弹出窗一样，Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。使用JavaScript触发下拉菜单和声明式原理是基本类似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者样式。同样用一个简单的示例来做演示：

<ul class="nav nav-pills">
    <li class="dropdown">
        <a href="##"  class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
            <li role="presentation"><a href="##">CSS3</a></li>
            <li role="presentation"><a href="##">HTML5</a></li>
            <li role="presentation"><a href="##">Sass</a></li>
        </ul>
    </li>
    <li class="active"><a href="##">前端论坛</a></li>
    <li><a href="##">关于我们</a></li>
</ul>

使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单。

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

滚动监控器

1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。
2、用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示

设计

第一步：导入依赖

使用滚动监控器，首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。

第二步：设计一个带有下拉菜单的导航条

分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控。

第三步：设计监控对象

这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target=”#navbar-menu””属性（这个属性值要与前面的nav标签的id名称保持一致）

第四步：为监控对象定义样式

设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条）。

.scrollspy{
    height:500px;
    font-size:20px;
    overflow:auto;
}

声明属性触发滚动监控

为监控对象设置被监控的data属性：data-spy=”scroll”，指定监控的导航条：data-target=”#navbar-menu”。同时定义监控过程中滚动条偏移位置data-offset=”60”。代码如下：

<div class="scrollspy" data-spy="scroll" data-target="#navbar-menu" data-offset="60">
  …
</div>

现在浏览器中预览，则可以看到当滚动div.scrollspy的滚动条时，导航条会实时监控并更新当前被激活的菜单项. 如果导航里有下拉菜单，并且滚动区域的内容到达下拉菜单子项所对应的区域，除了菜单高亮以外，子菜单的父元素dropdown也会高亮.

在body中加监控

除了这种方法之外，还可以直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部。如下所示：

<body data-spy="scroll" data-target="#navbar-menu">
    <div class="navbar navbar-default navbar-fixed-top" id="navbar-menu">
    </div>
    <h3 id="blog">Blog</h3>
    <p>…</p>
</body>

注意：导航条必须设置为顶部固定样式（navbar-fixed-top）。

JavaScript方法触发滚动监控器

在Bootstrap框架中，使用JavaScript方法触发滚动监控器相对来说较为简单，只需要指定两个容器的名称即可。比如下面的结构：

<nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation">
  …
</nav>
<div class="scrollspy" id="scrollspy">
  …
</div>

JavaScript触发可以这样写：

$(function(){
   
    $("#scrollspy").scrollspy({
        target: "#navbar-menu"
    });
})

Bootstrap的滚动监控还提供了一个方法scrollspy(“refresh”)。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法：

$(function(){
   
    $("[data-spy='scroll']").each(function(){
   
        var $spy=$(this).scrollspy("refresh");
    })
})

需要注意的是，这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项。

选项卡（Tabs）

Bootstrap框架中的选项卡主要有两部分内容组成：
* 选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）
* 底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示

选项卡的结构

一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。拿下面的示例来做演示。其HTML结构如下：

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab">公告</a></li>
    <li><a href="#rule" role="tab">规则</a></li>
    <li><a href="#forum" role="tab">论坛</a></li>
    <li><a href="#security" role="tab">安全</a></li>
    <li><a href="#welfare" role="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -

最低0.47元/天解锁文章

大大大大大桃子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 的 JavaScript 插件

整理自慕课笔记 Bootstrap V3.2中提供了12种JavaScript插件，他们分别是： * 动画过渡（Transitions）:对应的插件文件“transition.js” * 模态弹窗（Modal）:对应的插件文件“modal.js” * 下拉菜单（Dropdown）：对应的插件文件“dropdown.js” * 滚动侦测（Scrollspy）：对应的插件文件“scrollsp
复制链接

扫一扫

专栏目录