Bootstrap中的js插件使用

news2024/12/28 19:05:30

1. 标签页

1.1 init

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script src="../Bootstrap/js/jQuery.min.js"></script>
    <script src="../Bootstrap/js/bootstrap.min.js"></script>
    <title>Document</title>
    <!-- 
        标签页的跳转实际上是基于<a>的```锚链接```; 
        淡入淡出效果：
            如果需要为标签页设置淡入淡出效果, 请添加.fade到每个.tab-pane的后面;
            第一个标签页必须添加.in类, 以便淡入显示初始化内容; 如下所示：
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="home">...</div>
                    <div class="tab-pane fade" id="svn">...</div>
                    <div class="tab-pane fade" id="ios">...</div>
                    <div class="tab-pane fade" id="java">...</div>
                </div>
     -->
</head>

<body>
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">
                bootstrap教程
            </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>home--->bootstrap教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。bootstrap先飞早入行——学的不仅是技术，更是梦想。</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>ejb--->Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
            </p>
        </div>
    </div>
</body>

</html>

请添加图片描述

1.2 方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script src="../Bootstrap/js/jQuery.min.js"></script>
    <script src="../Bootstrap/js/bootstrap.min.js"></script>
    <title>Document</title>
    <!-- 
        .$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。
     -->
</head>

<body>
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">
                bootstrap教程
            </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>home--->bootstrap教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。bootstrap先飞早入行——学的不仅是技术，更是梦想。</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>ejb--->Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
            </p>
        </div>
    </div>

    <script>
        $(function () {
            $('#myTab li:eq(1) a').tab('show');
        });
    </script>
</body>

</html>

请添加图片描述

2. 滚动监听

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script src="../Bootstrap/js/jQuery.min.js"></script>
    <script src="../Bootstrap/js/bootstrap.min.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 
        滚动监听的组件：
            1. 本质上是锚链接; 
            2. 被监听组件的定位方式是: position: relative; 
            3. 通过data-属性进行调用, 可以将data-spy="scroll"添加到想要监视的元素; 
            4. 然后添加data-target属性绑定到 .nav组件; 
     -->
    <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse"
                    data-target=".bs-js-navbar-scrollspy">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">教程名称</a>
            </div>
            <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
                <ul class="nav navbar-nav">
                    <li><a href="#ios">iOS</a></li>
                    <li><a href="#svn">SVN</a></li>
                    <li class="dropdown">
                        <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
                            <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
                            <li><a href="#ejb" tabindex="-1">ejb</a></li>
                            <li class="divider"></li>
                            <li><a href="#spring" tabindex="-1">spring</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div data-spy="scroll" data-target="#navbar-example" data-offset="0"
        style="height:200px;overflow:auto; position: relative;">
        <h4 id="ios">iOS</h4>
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
        </p>
        <h4 id="svn">SVN</h4>
        <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software
            Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
        </p>
        <h4 id="jmeter">jMeter</h4>
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
        </p>
        <h4 id="ejb">EJB</h4>
        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
        <h4 id="spring">Spring</h4>
        <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
        </p>
        <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
        </p>
    </div>
</body>

</html>

请添加图片描述

3. 顶部导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
    <script src="./Bootstrap/js/jQuery.min.js"></script>
    <script src="./Bootstrap/js/bootstrap.min.js"></script>
    <title>导航页</title>
</head>

<body>
    <div class="contanier">
        <!-- 顶部导航 -->
        <div class="row">
            <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">顶部导航区域</a>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

</body>

</html>

在这里插入图片描述

4. 弹框系列

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  <script src="./Bootstrap/js/jQuery.min.js"></script>
  <script src="./Bootstrap/js/bootstrap.min.js"></script>
  <title>Document</title>
</head>

<body>
  <!-- 1. 模态框 -->
  <!-- Button trigger modal -->
  <!-- 
    相关说明：
      aria-labelledby="myModalLabel"，该属性引用模态框的标题。
      aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
      class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
      class="modal-header"，modal-header 是为模态窗口的头部定义样式的类。
      class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
      class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
      data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
      data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。
      选项：            类型                                data属性名称
        backdrop:     bool 或 static(默认为true)              data-backdrop
        keyboard:     bool(默认true)                          data-keyboard
        show:         bool(默认true)                          data-show
        remote:       bool(默认false)                         data-remote
   -->
  <a data-toggle="modal" data-target="#myModal">Click me</a>
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-keyboard="false" data-target="#myModal"
    data-backdrop="false" data-remote="./init2.html">
    通过data-属性弹出模态框
  </button>
  <button id="myBtn1">通过函数弹出模态框</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <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">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <!-- 内容 -->
        <div class="modal-body">
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
          Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </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>

  <!-- 2. 下拉菜单 -->
  <hr>
  <button id="myBtn2" data-toggle="dropdown">下拉菜单</button>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

  <!-- 3. 工具提示 -->
  <h4>工具提示（Tooltip）插件 - 锚</h4>
  这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>
  这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a>
  这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a>
  这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</a>
  这是一个 <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</a>
  这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>
  <p class="tooltip-options">
    这是一个
    <a href="#" data-toggle="tooltip" title="<h2>am Header2 </h2>">Tooltip 方法 options</a>
  </p>
  <p class="tooltip-show">
    <a href="#" data-toggle="tooltip" title="<h2>am Header2 </h2>">事件触发行为</a>
  </p>
  <hr>
  <h4>工具提示（Tooltip）插件 - 按钮</h4>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left"
    title="Tooltip on left">Tooltip on left</button>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top"
    title="Tooltip on top">Tooltip on top</button>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
    title="Tooltip on bottom">Tooltip on bottom</button>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"
    title="Tooltip on right">Tooltip on right</button>

  <!-- 4. 弹出框 -->
  <hr>
  <a href="#" data-toggle="popover" data-placement="top" title="通过a链接进行弹出框">a链接 -> 弹出框</a>
  <button id="popover1" type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="left"
    title="Popover title"
    data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框(左侧)</button>
  <button id="popover2" type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="top"
    title="Popover title"
    data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框(上侧)</button>
  <button id="popover3" type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="bottom"
    title="Popover title"
    data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框(下侧)</button>
  <button id="popover4" type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-placement="right"
    title="Popover title"
    data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框(右侧)</button>

  <!-- 5. 警告框 -->
  <!-- &times;实体 是一个 x(乘号); 充当了关闭按钮 -->
  <!-- 执行具体的关闭功能是通过 data-dismiss="alert"来执行的; -->
  <h3>警告框（Alert）插件 alert() 方法</h3>
  <div id="myAlert" class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert">&times;</a> <!-- 关闭按钮 -->
    <strong>成功！</strong>结果是成功的。                       <!-- 提示文字 -->
  </div>
  <div id="myAlert2" class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>警告！</strong>您的网络连接有问题。
  </div>
  <div id="" class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>                                                               <!-- 关闭按钮 -->
    <strong>提示！</strong> 官方提供的button仅仅是一个关闭按钮               <!-- 提示文字 -->
  </div>

  <script>
    $(function () {

      /* 模态对话框 */
      $("#myBtn1").click(function () {
        $('#myModal').modal({
          keyboard: false
        });

        // $("#myModal").modal('show'); 
      });
      $("#myModal").on("show.bs.modal", function (event) {
        // alert("事件触发了!");
      });

      /* 下拉菜单 */
      $("#myBtn2").on("click", function () {
        $('.dropdown-toggle').dropdown('toggle');   // 不管用, 后测
      });

      /* 工具提示 */
      /* 使用以下脚本来启用页面中的所有提示工具 */
      $('[data-toggle="tooltip"]').tooltip({
        trigger: 'hover'
      });
      $(".tooltip-options a").tooltip({ html: true });    // html标签没有被成功解析出来(待后)
      $('.tooltip-show').on('show.bs.tooltip', function () {
        alert("tooltip is showing...");
      });

      /* 弹出框 */
      $('[data-toggle="popover"]').popover();
      $('#popover2').on('show.bs.popover', function () {
        alert('弹出框事件监听!')
      });

      /* 警告框 */
      $(".close").click(function () {
        // $("#myAlert").alert();
        // $("#myAlert2").alert();
      });
    });

  </script>
</body>

</html>

请添加图片描述

5. 按钮系列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
    <script src="./Bootstrap/js/jQuery.min.js"></script>
    <script src="./Bootstrap/js/bootstrap.min.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 1. 按钮 -->
    <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
        加载状态(添加属性data-loading-text="Loading...")
    </button>
    <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
        单个切换(添加属性data-toggle="button")
    </button>
    <hr>
    <!-- 复选框组(添加属性data-toggle="buttons") -->
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="checkbox" checked> Checkbox 1 (pre-checked)
        </label>
        <label class="btn btn-primary">
            <input type="checkbox"> Checkbox 2
        </label>
        <label class="btn btn-primary">
            <input type="checkbox"> Checkbox 3
        </label>
    </div>
    <!-- 按钮方法( button('toggle'), button('loading'), button('reset'), button(string) ) -->
    <div id="myButtons1" class="bs-example">
        <button type="button" class="btn btn-primary">button('toggle')</button>
    </div>
    <div id="myButtons2" class="bs-example">
        <button type="button" class="btn btn-primary" data-loading-text="加载中...">button('loading')
        </button>
    </div>
    <div id="myButtons3" class="bs-example">
        <button type="button" class="btn btn-primary" data-loading-text="加载中...">button('reset')
        </button>
    </div>
    <button type="button" class="btn btn-primary" id="myButton4" data-complete-text="Loading finished">button(string)
    </button>


    <!-- 2. 折叠面板 -->
    <!-- 
        (1) data-toggle:                
        (2) data-target/href:           
        (3) data-parent:                
     -->
    <hr>
    <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false"
        aria-controls="collapseExample">
        链接a触发折叠(href="#...")
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
        aria-expanded="false" aria-controls="collapseExample">
        按钮触发折叠(data-target="#...")
    </button>

    <div class="collapse" id="collapseExample">
        <div class="well">
            HelloWorld, today is a good day, let go school to play games！
        </div>
    </div>

    <hr>
    <!-- 折叠面板(外壳) -->
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <!-- 子项目折叠 -->
        <div class="panel panel-default">
            <!-- 折叠头部 -->
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"
                        aria-expanded="true" aria-controls="collapseOne">
                        折叠项目一
                    </a>
                </h4>
            </div>
            <!-- 展开/折叠内容 -->
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                    wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                    eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                    assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                    sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                    farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                    labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                        href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        折叠项目二
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                    wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                    eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                    assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                    sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                    farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                    labore sustainable VHS.
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                        href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        折叠项目三
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
                    wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
                    eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
                    assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                    sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
                    farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                    labore sustainable VHS.
                </div>
            </div>
        </div>
    </div>

    <!-- 3. 轮播图 -->
    <!-- 
        (1) data-slide:             接受关键字prev或next, 用于改变幻灯片的位置; 
        (2) data-slide-to:          原始滑动索引; 
        (3) data-ride="carousel"：   用于标记轮播在页面加载时就开始动画播放; 
     -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators(轮播指标) -->
        <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>

        <!-- Wrapper for slides(轮播图片) -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="./images/image1.jpeg" alt="...">
                <div class="carousel-caption">
                    第一张图片
                </div>
            </div>
            <div class="item">
                <img src="./images/image2.jpeg" alt="...">
                <div class="carousel-caption">
                    第二张图片
                </div>
            </div>
            <div class="item">
                <img src="./images/image3.jpeg" alt="...">
                <div class="carousel-caption">
                    第三张图片
                </div>
            </div>
        </div>
        <!-- Controls(轮播导航, 按钮) -->
        <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 style="text-align:center;">
            <input type="button" class="btn start-slide-btn" value="Start">
            <input type="button" class="btn pause-slide-btn" value="Pause">
            <input type="button" class="btn prev-slide-btn" value="Previous Slide">
            <input type="button" class="btn next-slide-btn" value="Next Slide">
            <input type="button" class="btn slide-one-btn" value="Slide 1">
            <input type="button" class="btn slide-two-btn" value="Slide 2">
            <input type="button" class="btn slide-three-btn" value="Slide 3">
        </div>
    </div>

    <script>
        $(function () {
            var flag = false;
            $('#myButton').on('click', function () {
                var $btn = $(this).button('loading')
                // business logic...
                // $btn.button('reset')
            });
            $("#myButtons1 .btn").click(function () {
                $(this).button('toggle');
            });
            $("#myButtons2 .btn").click(function () {
                $(this).button('loading').delay(1000).queue(function () {
                    // ... 
                });
            });
            $("#myButtons3 .btn").click(function () {
                $(this).button('loading').delay(1000).queue(function () {
                    // 重置按钮状态，文本内容恢复为最初的内容
                    $(this).button('reset');
                });
            });
            $(function () {
                $("#myButton4").click(function () {
                    $(this).button('loading').delay(1000).queue(function () {
                        // 将按钮内容设置为属性 data-complete-text 所对应的值
                        $(this).button('complete');
                    });
                });
            });

            // ```轮播图 ```
            $('#carousel-example-generic').carousel({
                interval: 500,
                pause: "hover",
                wrap: true
            }); 
            // 初始化轮播（左 -> 右）
            $(".start-slide-btn").click(function () {
                $("#carousel-example-generic").carousel('cycle');
            });
            // 停止轮播
            $(".pause-slide-btn").click(function () {
                $("#carousel-example-generic").carousel('pause');
            });
            // 循环轮播到上一个项目
            $(".prev-slide-btn").click(function () {
                $("#carousel-example-generic").carousel('prev');
            });
            // 循环轮播到下一个项目
            $(".next-slide-btn").click(function () {
                $("#carousel-example-generic").carousel('next');
            });
            // 循环轮播到某个特定的帧 
            $(".slide-one-btn").click(function () {
                $("#carousel-example-generic").carousel(0);
            });
            $(".slide-two-btn").click(function () {
                $("#carousel-example-generic").carousel(1);
            });
            $(".slide-three-btn").click(function () {
                $("#carousel-example-generic").carousel(2);
            });
        });
    </script>
</body>

</html>

请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/581558.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

sqli_labs21-23

sqli_labs21-23

less21 这题是cookie注入&#xff0c;如果不登录进去是看不到cookie信息的&#xff0c;所以我们要先登录进去 用户admin&#xff0c;密码admin 抓包后发现cookie字段有base64编码信息&#xff0c;选中后burp自动检测翻译 既然是cookie注入并且字段是被加密了的&#xff0c;说明…
阅读更多...
chatgpt赋能python：Python中5/2问题引发的思考

chatgpt赋能python：Python中5/2问题引发的思考

Python中5/2问题引发的思考 在Python中&#xff0c;我们常常遇到数字计算的问题&#xff0c;比如5/2。当我们在Python中执行如下代码时&#xff1a; print(5/2)输出结果为2.5。 但是在其他编程语言中&#xff0c;比如C和Java&#xff0c;同样的计算结果是2&#xff0c;而不是…
阅读更多...
chatgpt赋能python：Pythonnumpy库下载教程：学习数据分析必备工具

chatgpt赋能python：Pythonnumpy库下载教程：学习数据分析必备工具

Python numpy库下载教程&#xff1a;学习数据分析必备工具 介绍 Python是一种优秀的脚本语言&#xff0c;常用于数据分析、机器学习等领域&#xff0c;而Numpy是Python中最基础的科学计算库&#xff0c;提供了大量针对数组及矩阵操作的函数和方法。然而&#xff0c;对于初学者…
阅读更多...
jQuery元素操作和尺寸位置

jQuery元素操作和尺寸位置

1. 遍历元素 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width,…
阅读更多...
Kubernetes_核心组件_kubelet_kubelet服务全解析

Kubernetes_核心组件_kubelet_kubelet服务全解析

文章目录 前言一、查看kubelet当前运行1.1 查看kubelet当前运行1.2 kubelet配置文件1.3 kubelet启动参数文件1.4 kubelet启动全过程 (自定义启动参数文件) 二、kubelet启动过程2.1 kubelet启动过程2.2 自定义kubelet所有文件并运行步骤1&#xff1a;新建静态token文件和user&am…
阅读更多...
Fourier分析入门——第11章——Fourier变换

Fourier分析入门——第11章——Fourier变换

目录 第11章 Fourier变换(Transform) 11.1 引言 11.2 逆向正弦和余弦变换(The Inverse Cosine and Sine Transforms) 11.3 正向正弦和余弦变换(The Forward Cosine and Sine Transforms) 11.4 离散谱对比谱密度(Discret spectra vs. spectral density) 11.5 Fourier变换的…
阅读更多...
chatgpt赋能python：Python中4.5/2等于多少？——解密Python的除法运算

chatgpt赋能python：Python中4.5/2等于多少？——解密Python的除法运算

Python中4.5/2等于多少&#xff1f;——解密Python的除法运算 Python作为一种常用的编程语言&#xff0c;在业界有着广泛的应用。而除法是Python中常用的运算之一。但是&#xff0c;当我们输入4.5/2时&#xff0c;会得到什么样的结果呢&#xff1f;这篇文章将解密Python的除法…
阅读更多...
Spring Boot：从入门到实践的全面指南

Spring Boot：从入门到实践的全面指南

文章目录 1. Spring Boot简介及特性1.1 简介&#xff1a;什么是Spring Boot1.2 特性&#xff1a;Spring Boot的优势与特点1.3 四大核心&#xff1a;Spring Boot的核心组成 2. Spring Boot入门案例2.1 Spring Boot项目开发步骤2.2 创建一个Spring MVC的Spring Boot Controller2.…
阅读更多...
chatgpt赋能python：Python不能参加奥赛的原因

chatgpt赋能python：Python不能参加奥赛的原因

Python不能参加奥赛的原因 Python 是一种广泛使用的高级编程语言&#xff0c;以其简单易学、可读性高等特点受到了众多程序员的喜爱&#xff0c;但是它在国际奥林匹克竞赛中并不被允许参赛。本文将会介绍 Python 不能参加奥赛的原因&#xff0c;并且分析该限制是否合理。 原因…
阅读更多...
使用 GitHub Actions 自动部署 Hexo 个人博客

使用 GitHub Actions 自动部署 Hexo 个人博客

文章目录 申请 GitHub Token源码仓库配置 Github Action重新设置远程仓库和分支查看部署 每次部署 Hexo 都需要运行 hexo cl & hexo g & hexo d 指令三件套完成推送到远程仓库&#xff0c;随着文章越来越多&#xff0c;编译的时间也会越来越长&#xff0c;通过 Github …
阅读更多...
前缀树概念

前缀树概念

前缀树&#xff08;prefix tree&#xff09; 准备一个Str[]&#xff0c;数组中元素有[“abc”,“bcd”,“abg”,“bcde”,“qwe”]&#xff0c;如何将数组中元素加到树中呢&#xff1f; 从最开始的字符串abc说&#xff0c;第一个字符是a&#xff0c;从一个空的头节点出发&#…
阅读更多...
jQuery属性操作和内容文本值

jQuery属性操作和内容文本值

1. 属性操作 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width,…
阅读更多...
全局CSS样式1

全局CSS样式1

1. 响应式基础 1.1 init <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compati…
阅读更多...
chatgpt赋能python：Python两行三列列表：更高效的数据展示方式

chatgpt赋能python：Python两行三列列表：更高效的数据展示方式

Python 两行三列列表&#xff1a;更高效的数据展示方式 在Python编程中&#xff0c;经常会需要对数据进行展示。而最常见的方式则是使用列表。然而&#xff0c;当数据量较大时&#xff0c;传统的列表显示方式显得过于冗长。Python两行三列列表的使用&#xff0c;不仅可以增加代…
阅读更多...
chatgpt赋能python：Python不挂科，学会这些技能就足够

chatgpt赋能python：Python不挂科，学会这些技能就足够

Python不挂科&#xff0c;学会这些技能就足够 Python已成为现代编程语言中最受欢迎的一种&#xff0c;它擅长处理数据、人工智能等复杂的软件开发任务。互联网时代的到来也让Python的使用场景更加广泛&#xff0c;从前后端开发到数据分析。无论是学习Python的初学者还是有一定…
阅读更多...
MQTT（3）：MQTT协议原理

MQTT（3）：MQTT协议原理

官方文档中对于MQTT协议包的结构有着具体的说明&#xff1a;http://mqtt.org/documentation 在MQTT协议中&#xff0c;一个MQTT数据包由&#xff1a;固定头&#xff08;Fixed header&#xff09;、可变头&#xff08;Variable header&#xff09;、消息体&#xff08;payload&…
阅读更多...
chatgpt赋能python：介绍Python在SEO中的重要性

chatgpt赋能python：介绍Python在SEO中的重要性

介绍Python在SEO中的重要性 随着互联网的不断发展&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;变得越来越重要。SEO一直是网络营销的重要组成部分&#xff0c;可以增加网站的可见性和流量。Python作为一种强大的编程语言&#xff0c;可以帮助网站优化人员更好地管理和…
阅读更多...
LIMA和QLoRA论文解读

LIMA和QLoRA论文解读

《LIMA: Less Is More for Alignment》 paper: https://arxiv.org/abs/2305.11206 Meta在2023年5月发布了论文《LIMA: Less Is More for Alignment》&#xff0c;基于LLaMa-65B微调了大模型LIMA&#xff0c;号称只用了1000个精心策划的问题和答复进行微调&#xff0c;就达到了…
阅读更多...
HashMap 1.8全流程分析，详解put、resize、遍历等相关函数。以及其内部的二进制原理

HashMap 1.8全流程分析，详解put、resize、遍历等相关函数。以及其内部的二进制原理

简介 从常用属性->构造方法->添加->扩容->查询->删除->遍历的顺序进行HashMap源码阅读&#xff0c;涉及到一些二进制的用法以及意义也会进行说明。 HashMap源码解析 简介 HashMap采用了hash 表的数据结构进行实现&#xff0c;在key未存在hash冲突的情况下&…
阅读更多...
Games104现代游戏引擎学习笔记09

Games104现代游戏引擎学习笔记09

Animation Blending 两个动画衔接 Math of blending&#xff1a;LERP&#xff1a;线性插值 在两个动画之间取关键帧插值 weight1weight2等于1 两个动画必须都是循环的&#xff0c;归一化之后能一致 Blend Space 在采用空间里的所有动画&#xff08;clips&#xff09;&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023