《jquery bootstrap》

解决方案

在现代Web开发中，构建具有吸引力且功能丰富的用户界面是一个常见的需求。JQuery和Bootstrap的结合提供了一个强大的解决方案。通过jQuery简化HTML文档遍历、事件处理、动画等操作，而Bootstrap则提供了响应式的布局、美观的组件样式。两者搭配使用，能够快速创建出适应不同设备屏幕大小、具有良好交互体验的网页。

实现导航栏固定效果

有时候我们希望页面的导航栏在页面滚动时保持在顶部位置，方便用户随时点击导航链接。

思路一：使用原生Bootstrap类

Bootstrap本身就提供了fixed-top类来实现这个功能。
```html

</p>

<h3>思路二：结合jQuery自定义逻辑</h3>

<p>如果想要更复杂的固定逻辑，例如当页面滚动到某个元素后再固定导航栏，可以使用jQuery。
```html
</p>



    
    
    <title>Document</title>
    
    
        .fixed{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z - index: 1000;
        }
    


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Brand</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div style="height: 100vh"></div>
    <div id="targetElement" style="height: 100vh;background-color: lightgray"></div>
    
    
        $(window).scroll(function(){
            if($(this).scrollTop()> = $('#targetElement').offset().top){
                $('nav').addClass('fixed');
            }else{
                $('nav').removeClass('fixed');
            }
        });
    
    



<p>

实现模态框弹出

模态框是一种常见的用于显示提示信息、登录注册等功能的组件。

思路一：直接使用Bootstrap自带数据属性触发

html
</p>



    
    
    <title>Document</title>
    


    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>




<p>

思路二：通过jQuery动态触发

html
</p>



    
    
    <title>Document</title>
    


    <button id="showModalBtn" type="button" class="btn btn-primary">Show modal by jQuery</button>
    <!-- Modal -->
<div class="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


    $('#showModalBtn').click(function(){
        $('#exampleModal').modal('show');
    });





<p>