Bootstrap从入门到实战---滚动监听

最新推荐文章于 2024-06-14 05:54:11 发布
i see the future
最新推荐文章于 2024-06-14 05:54:11 发布
阅读量193
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
本文链接：https://blog.csdn.net/m0_46629123/article/details/118558668
版权
HTML/CSS/JS/Bootstrap 专栏收录该内容
98 篇文章 8 订阅
订阅专栏
Bootstrap从入门到实战—滚动监听
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        body {
            padding:20px;
            
        }
    </style>
</head>
    <!-- 导航栏中的示例 -->
    <nav id="navbar-example2" class="navbar navbar-light bg-light">
        <a href="#" class="navbar-brand">navbar</a>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a href="#fat" class="nav-link">@fat</a>
            </li>
            <li class="nav-item">
                <a href="#mdo" class="nav-link">@mdo</a>
            </li>
            <li class="nav-item">
                <a href="#one" class="nav-link">@one</a>
            </li>
            <li class="nav-item">
                <a href="#two" class="nav-link">@two</a>
            </li>
        </ul>
    </nav>
    <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" style="position: relative; height:300px; overflow:scroll;">
        <h4 id="fat">Item 1</h4>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
        <h4 id="mdo">Item 2</h4>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
        <h4 id="one">Item 3</h4>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
        <h4 id="two">Item 4</h4>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>    
    </div>



    <!-- 嵌套导航的示例 -->
    <div class="row">
    <nav id="navbar-example3" class="navbar navbar-light bg-light col-2">
        <nav class="nav nav-pills flex-column">
        <a class="navbar-brand" href="#">Navbar</a>
          <a class="nav-link" href="#item-1">Item 1</a>
          <nav class="nav nav-pills flex-column">
            <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
            <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
          </nav>
          <a class="nav-link" href="#item-2">Item 2</a>
          <a class="nav-link" href="#item-3">Item 3</a>
          <nav class="nav nav-pills flex-column">
            <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
            <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
          </nav>
        </nav>
      </nav>
      
      <div data-spy="scroll" data-target="#navbar-example3" data-offset="0" class="col-8" style="height:500px; overflow:scroll;">
        <h4 id="item-1">Item 1</h4>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
        <h5 id="item-1-1">Item 1-1</h5>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
        <h5 id="item-1-2">Item 1-2</h5>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
        <h4 id="item-2">Item 2</h4>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
        <h4 id="item-3">Item 3</h4>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
        <h5 id="item-3-1">Item 3-1</h5>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
        <h5 id="item-3-2">Item 3-2</h5>
        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
    </div>

</div>


    <!-- 列表组示例 -->
<div class="row">
  <div id="list-example" class="list-group col-4 d-inline-block" style="height:300px;">
    <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
    <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
    <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
    <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
  </div>
  <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example col-8 d-inline-block" style="height:300px; overflow:scroll;">
    <h4 id="list-item-1">Item 1</h4>
    <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
    <h4 id="list-item-2">Item 2</h4>
    <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
    <h4 id="list-item-3">Item 3</h4>
    <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
    <h4 id="list-item-4">Item 4</h4>
    <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu。做 aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labour。Fugiat labidunt tempor eu consequat enim dolore proident。Qui labourum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua offcia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore。Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore。</p>
  </div>
</div>




            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>




</body>
</html>
在这里插入图片描述
i see the future
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap从入门到实战---滚动监听

Bootstrap从入门到实战—滚动监听<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title>  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
复制链接

扫一扫