实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!DOCTYPE html> <html> <head> <title>Bootstrap5 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script> </head> <body> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">body 元素可以滚动</button> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">显示画布(默认)</button> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">允许滚动及显示画布</button> <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasScrollingLabel">正文内容可以滚动</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <p>滚动页面查看效果。</p> </div> </div> <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">使用背景画布</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <p>正文内容不可滚动</p> </div> </div> <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">使用背景画布，正文内容可滚动</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <p>滚动页面查看效果。</p> </div> </div> <div class="container-fluid mt-3"> <h3>侧边栏滚动测试</h3> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <br /><br /><br /><br /><br /> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <br /><br /><br /><br /><br /> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <br /><br /><br /><br /><br /> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <p>侧边栏滚动测试内容。。。。</p> <br /><br /><br /><br /><br /> </div> </body> </html>
运行结果：