閱讀(1.2k) 書簽贊(0) 我要糾錯(cuò)

Bootstrap5 側(cè)邊欄導(dǎo)航(Offcanvas)

2023-06-29 15:20 更新

Bootstrap5 側(cè)邊欄側(cè)邊欄類似于模態(tài)框，在移動(dòng)端設(shè)備中比較常用。

創(chuàng)建滑動(dòng)導(dǎo)航

我們可以通過(guò) JavaScript 來(lái)設(shè)置是否在 .offcanvas 類后面添加 .show 類，從而控制側(cè)邊欄的顯示與隱藏：

.offcanvas 隱藏內(nèi)容 (默認(rèn))
.offcanvas.show 顯示內(nèi)容

可以使用 a 鏈接的 href 屬性或者 button 元素使用 data-bs-target 屬性來(lái)設(shè)置側(cè)邊欄。這兩種情況都需要使用 data-bs-toggle="offcanvas"。

創(chuàng)建滑動(dòng)導(dǎo)航實(shí)例如下：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  使用鏈接的 href 屬性
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  按鈕中使用 data-bs-target
</button>
 
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">側(cè)邊欄</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>


</body>
</html>

側(cè)邊欄的方向

可以通過(guò)以下四個(gè)類來(lái)控制側(cè)邊欄的方向：

.offcanvas-start 顯示在左側(cè)，如上實(shí)例。
.offcanvas-end 顯示在右側(cè)
.offcanvas-top 顯示在頂部
.offcanvas-bottom 顯示在底部

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">頂部導(dǎo)航欄</button>
 
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">顯示在頂部導(dǎo)航欄</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">右側(cè)側(cè)邊欄</button>
 
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">顯示在右側(cè)側(cè)邊欄</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">底部導(dǎo)航欄</button>
 
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">顯示在底部導(dǎo)航欄</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>
	
</body>
</html>

設(shè)置背景及背景是否可滾動(dòng)

我們可以在彈出側(cè)邊欄的時(shí)候設(shè)置 <body> 元素是否可以滾動(dòng)，也可以設(shè)置是否顯示一個(gè)背景畫布。使用 data-bs-scroll 屬性來(lái)設(shè)置 <body> 元素是否可滾動(dòng)，data-bs-backdrop 來(lái)切換是否顯示背景畫布。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">body 元素可以滾動(dòng)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">顯示畫布(默認(rèn))</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">允許滾動(dòng)及顯示畫布</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">正文內(nèi)容可以滾動(dòng)</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>滾動(dòng)頁(yè)面查看效果。</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>正文內(nèi)容不可滾動(dòng)</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">使用背景畫布，正文內(nèi)容可滾動(dòng)</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>滾動(dòng)頁(yè)面查看效果。</p>
  </div>
</div>
<div class="container-fluid mt-3">
  <h3>側(cè)邊欄滾動(dòng)測(cè)試</h3>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <br /><br /><br /><br /><br />
   <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <br /><br /><br /><br /><br />
   <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <br /><br /><br /><br /><br />
   <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <p>側(cè)邊欄滾動(dòng)測(cè)試內(nèi)容。。。。</p>
  <br /><br /><br /><br /><br />
</div>	
</body>
</html>

以上內(nèi)容是否對(duì)您有幫助：

← Bootstrap5 滾動(dòng)監(jiān)聽(tīng)(Scrollspy)

Bootstrap5 小工具 →

寫筆記

我要補(bǔ)充