Bootstrap框架（JavaScript组件）

灰太狼 2023-10-14 11:00 23阅读 0赞

#### 目录 ####

*   *   *  前言
         *  一，JavaScript插件简介
         *  二，插件的引入方式
         *  三，data属性
         *  四，关闭data属性
         *  五，过渡插件
         *  六，模态框
         *   *  6.1，JavaScript操作模态框
             *  6.2，模态框属性
             *  6.3，模态框方法
             *  6.4，模态框事件
         *  七，选项卡简介
         *   *  7.1，选项卡组成及实现
             *  7.2，选项卡使用中注意点
             *  7.3，胶囊式选项卡
         *  八，轮播图简介
         *   *  8.1，旋转轮播实现
             *  8.2，旋转轮播结构分析
             *  8.3，带有文字描述的旋转轮播
             *  8.4，旋转轮播的data属性
         *  最后

#### 前言 ####

**上一章博客我们讲解了Bootstrap的组件**  
**这一章我们来讲一下一些JavaScript组件**

#### 一，JavaScript插件简介 ####

*  为什么需要JavaScript插件？
    
     *  项目中遇到复杂的交互效果，如轮播图、模态框等可以使用JavaScript插件轻松完成
 *  插件的引入方式
 *  data属性
    
     *  data属性让JavaScript插件使用门槛降低

#### 二，插件的引入方式 ####

*  一次性全部插件引入
    
     *  通过将bootstrap.js或者bootstrap.min.js引入可实现一次性全部引入
 *  按需单个引入插件
    
     *  使用Bootstrap框架提供的单个“\*.js”文件，只引入某一个插件使用

#### 三，data属性 ####

*  JavaScript插件可以不写任何的JavaScript代码就能实现动态效果
    
     *  只需要按照data属性去操作即可

**data属性有很多，这些属性都是在data后紧跟一些名词，例如比较常用的data-toggle、data-target、data-dismiss等**

*  JavaScript插件的使用方法
    
     *  使用data属性来调用JavaScript插件
     *  使用原生代码来调用JavaScript插件

**考虑到使用的方便性和快捷性，比较推荐使用data属性来调用JavaScript插件**

#### 四，关闭data属性 ####

*  需自己封装data属性功能，希望Bootstrap框架的data属性不影响自己封装的功能时，需要将Bootstrap框架的data属性关闭

**语法**

$(document).off('.data-api');

*  如何只针对某个特定的插件将data属性关闭？
    
     *  只需在 data-api 前面添加特定插件的名称作为命名空间

**语法**

// 关闭旋转轮播插件的data属性
    $(document).off('.carousel.data-api');

#### 五，过渡插件 ####

*  Bootstrap使用的动画过渡效果都是基于CSS3动画来制作的，所以IE6-IE8浏览器不能使用过渡效果

**如果使用压缩版的 bootstrap.min.js 文件，则无需再单独引入过渡插件，因为此时过渡插件的功能已经融入到其他插件中**

*  过渡插件严格意义上不是一个标准的插件，是针对transitionEnd 事件的一个基本辅助工具
    
     *  常被其他插件用来检测当前浏览器是否支持 CSS 的过渡效果
 *  过渡效果可以在全局范围禁用，必须将禁用代码放在 transition.js （或 bootstrap.min.js）后面  
    **语法**

$.support.transition = false;

#### 六，模态框 ####

*  模态框（Modal）是覆盖在父窗体上的子窗体
    
     *  目的是显示来自一个单独源的内容，可以在不离开父窗体的情况下有一些互动
 *  模态框组成部分
    
     *  模态框包含头部（模态框标题和关闭按钮）、中间内容区域和一组放置于底部的按钮

**示例**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>模态框</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css">
    </head>
    <style>
    </style>
    <body>
    
        
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            显示模态框
        </button>
    
    
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-inline" action="#">
                            <div class="form-group">
                                <label for="user">用户名:</label>
                                <input type="text" class="form-control" id="user" placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label for="pwd">密码:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
                            </div>
                            <input type="submit" class="form-control" value="登录">
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
    
    </script>
    </html>

![在这里插入图片描述][0b0c46659af547f5a588911057e7f9cd.png]  
![在这里插入图片描述][54efe2c8412f40e7b63245f184ff88aa.png]  
**注意**

data-target="#myModal" 里面的 #myModal 要和 下面的id对应

*  千万不要在一个模态框上重叠另一个模态框，否则不会有效果
 *  务必将模态框的 HTML 代码放在文档的最高层级内（作为 body 元素的直接子元素），避免其他组件影响模态框的展现和功能

##### 6.1，JavaScript操作模态框 #####

*  除data属性之外，也可以使用JavaScript操作模态框
 *  只需一行 JavaScript 代码
    
     *  通过模态框的id调用模态框方法操作模态框
 *  JavaScript操作模态框
    
     *  模态框属性
     *  模态框方法
     *  模态框事件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>模态框</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css">
    </head>
    <style>
    </style>
    <body>
    
    
        <button type="button" class="btn btn-primary btn-lg" id="jsbtn">
            js模态框
        </button><br>
    
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-inline" action="#">
                            <div class="form-group">
                                <label for="user">用户名:</label>
                                <input type="text" class="form-control" id="user" placeholder="请输入用户名">
                            </div>
                            <div class="form-group">
                                <label for="pwd">密码:</label>
                                <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
                            </div>
                            <input type="submit" class="form-control" value="登录">
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $("#jsbtn").click(function(){
          
            $('#myModal').modal('show')
        })
    </script>
    </html>

![在这里插入图片描述][30acccced2b24dcd9d34cf99a53ecd3b.png]

##### 6.2，模态框属性 #####

**通过JavaScript可以操作模态框属性**  
![在这里插入图片描述][4d25f05d16814eeb8f478f4b96970b11.png]

##### 6.3，模态框方法 #####

*  模态框支持传入特定的字符串执行其内部方法
 *  常用的字符串名称和用法的描述

![在这里插入图片描述][455eba71ba3c4a09a6687807f407ebf5.png]

##### 6.4，模态框事件 #####

*  在实际的开发中，有时候希望在模态框弹出之前或者之后执行一些特定的操作，该如何来操作呢？
    
     *  模态框提供一些事件用于监听模态框执行的过程，在这些过程中开发者可以执行自定义的代码
 *  模态框事件

![在这里插入图片描述][ad140714b40e4275b2bfeb502a49032d.png]

#### 七，选项卡简介 ####

*  选项卡（Tab）也被称为标签页。通过结合一些 data 属性，可以轻松地创建一个选项卡界面

*  通过此插件可以把内容放置在选项卡甚至是下拉菜单标签页中

##### 7.1，选项卡组成及实现 #####

*  选项卡是由选项卡菜单和选项卡面板两部分组成

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>标签页</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css">
    </head>
    <body>
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#home" data-toggle="tab">
                    菜鸟教程
                </a>
            </li>
            <li><a href="#ios" data-toggle="tab">iOS</a></li>
            <li class="dropdown">
                <a href="#" id="myTabDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                    <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
                    <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
                </ul>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
            </div>
            <div class="tab-pane fade" id="ios">
                <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
                    TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
            </div>
            <div class="tab-pane fade" id="jmeter">
                <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
            </div>
            <div class="tab-pane fade" id="ejb">
                <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
                </p>
            </div>
        </div>
    
    
        
    </body>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $("ul a").on("shown.bs.tab",function(e){
          
            e.target
            e.relatedTarget 
        })
    </script>
    </html>

![在这里插入图片描述][d9107425c7d149b7a04b0aaad444a99c.png]

##### 7.2，选项卡使用中注意点 #####

*  实现选项卡的注意点
    
     *  实现选项卡面板时，选项卡菜单和选项卡面板需同时存在
     *  实现关键在于设置data-toggle=“tab”，每个选项卡菜单和选项卡面板是通过id对应的，对应之后点击选项卡菜单才能显示对应的选项卡面板
     *  选项卡面板都需要放置在类名为tab-content的div元素中

##### 7.3，胶囊式选项卡 #####

*  使用胶囊式选项卡需要注意

*  将类名nav-tabs更换为nav-pill
 *  将类名data-toggle的值由tab更换为pill

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>标签页</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css">
    </head>
    <body>
        <ul id="myTab" class="nav nav-pills">
            <li class="active">
                <a href="#home" data-toggle="pill">
                    菜鸟教程
                </a>
            </li>
            <li><a href="#ios" data-toggle="pill">iOS</a></li>
            <li class="dropdown">
                <a href="#" id="myTabDrop1" class="dropdown-toggle"
                   data-toggle="dropdown">Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                    <li><a href="#jmeter" tabindex="-1" data-toggle="pill">jmeter</a></li>
                    <li><a href="#ejb" tabindex="-1" data-toggle="pill">ejb</a></li>
                </ul>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
            </div>
            <div class="tab-pane fade" id="ios">
                <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
                    TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
            </div>
            <div class="tab-pane fade" id="jmeter">
                <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
            </div>
            <div class="tab-pane fade" id="ejb">
                <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
                </p>
            </div>
        </div>
    
    
        
    </body>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        $("ul a").on("shown.bs.tab",function(e){
          
            e.target
            e.relatedTarget 
        })
    </script>
    </html>

![在这里插入图片描述][690c40c2b9be4a5db2440909b05eca9c.png]

#### 八，轮播图简介 ####

*  旋转轮播（Carousel）又称轮播图
 *  是一种灵活的并且响应式的向站点添加滑块的方式
 *  内容可以是图像、内嵌框架、视频或者其想要放置的任何类型

##### 8.1，旋转轮播实现 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css">
    </head>
    <style>
         .focus {
          
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 100px auto;
        }
            
        .carousel,
        .carousel img {
          
            width: 100%;
            height: 500px!important;
        }
    
    </style>
    <body>
        <div class="container">
            
        </div>
    
        <hr>
    
        
    <div class="focus">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
    
            
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="../../淘宝/img/轮播图1.png" alt="...">
                    
                </div>
                <div class="item">
                    <img src="../../淘宝/img/轮播图2.png" alt="...">
                    
                </div>
                <div class="item">
                    <img src="../../淘宝/img/轮播图3.png" alt="...">
                    
                </div>
            </div>
    
            
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    
    </body>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    
    <script>
        $('.carousel').carousel({
          
            interval: 2000
        })
    </script>
    </html>

![在这里插入图片描述][9d648d683a3540c5be6e8fcb10142c3c.png]

##### 8.2，旋转轮播结构分析 #####

*  旋转轮播包含三个部分：图片容器、圆圈指示符、左右控制按钮
    
     *  图片容器是旋转轮播的主体区域，主要承载需要展示的内容
        
         *  所展示的内容放置在类名为item的div中
         *  所有需要展示内容被类名为carousel-inner的div包裹
     *  圆圈指示符的作用是定位当前轮播的位置，当点击圆圈指示符时也可以切换轮播图
        
         *  圆圈指示符的结构由有序列表构成
         *  列表的个数是由图片展示区域的item的个数决定的
     *  左右控制按钮的作用是点击控制按钮控制轮播方向
        
         *  左右控制按钮是使用两个a元素实现的
         *  这两个a元素上都使用了data-slide属性
         *  属性值只能是prev或者next，分别表示上一张或者下一张

##### 8.3，带有文字描述的旋转轮播 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="../css/bootstrap.min.css">
    </head>
    <style>
         .focus {
          
            width: 500px;
            height: 500px;
            background-color: pink;
            margin: 100px auto;
        }
            
        .carousel,
        .carousel img {
          
            width: 100%;
            height: 500px!important;
        }
    
    </style>
    <body>
        <div class="container">
            
        </div>
    
        <hr>
    
        
    <div class="focus">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
    
            
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="../../淘宝/img/轮播图1.png" alt="...">
                    
                        <div class="carousel-caption">
                          <h3>途欢黄金体验</h3>
                          <p>人生路途与健康同行畅快出行</p>
                        </div>
                </div>
                <div class="item">
                    <img src="../../淘宝/img/轮播图2.png" alt="...">
                    
                </div>
                <div class="item">
                    <img src="../../淘宝/img/轮播图3.png" alt="...">
                    
                </div>
            </div>
    
            
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    
    </body>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    
    <script>
        $('.carousel').carousel({
          
            interval: 2000
        })
    </script>
    </html>

![在这里插入图片描述][89936a16409c4e0c87ba725197f4595c.png]

##### 8.4，旋转轮播的data属性 #####

*  旋转轮播插件中除了data-ride、data-slide等，还支持其他的三个data属性

![在这里插入图片描述][66d14d66f9834244a1d9ffba9cd6abc9.png]  
**以上三个data属性都可使用在旋转轮播外层父容器上**

#### 最后 ####

送大家一句话：只要有决心和毅力，什么时候也不算晚。

[0b0c46659af547f5a588911057e7f9cd.png]: https://img-blog.csdnimg.cn/0b0c46659af547f5a588911057e7f9cd.png
[54efe2c8412f40e7b63245f184ff88aa.png]: https://img-blog.csdnimg.cn/54efe2c8412f40e7b63245f184ff88aa.png
[30acccced2b24dcd9d34cf99a53ecd3b.png]: https://img-blog.csdnimg.cn/30acccced2b24dcd9d34cf99a53ecd3b.png
[4d25f05d16814eeb8f478f4b96970b11.png]: https://img-blog.csdnimg.cn/4d25f05d16814eeb8f478f4b96970b11.png
[455eba71ba3c4a09a6687807f407ebf5.png]: https://img-blog.csdnimg.cn/455eba71ba3c4a09a6687807f407ebf5.png
[ad140714b40e4275b2bfeb502a49032d.png]: https://img-blog.csdnimg.cn/ad140714b40e4275b2bfeb502a49032d.png
[d9107425c7d149b7a04b0aaad444a99c.png]: https://img-blog.csdnimg.cn/d9107425c7d149b7a04b0aaad444a99c.png
[690c40c2b9be4a5db2440909b05eca9c.png]: https://img-blog.csdnimg.cn/690c40c2b9be4a5db2440909b05eca9c.png
[9d648d683a3540c5be6e8fcb10142c3c.png]: https://img-blog.csdnimg.cn/9d648d683a3540c5be6e8fcb10142c3c.png
[89936a16409c4e0c87ba725197f4595c.png]: https://img-blog.csdnimg.cn/89936a16409c4e0c87ba725197f4595c.png
[66d14d66f9834244a1d9ffba9cd6abc9.png]: https://img-blog.csdnimg.cn/66d14d66f9834244a1d9ffba9cd6abc9.png