Bootstrap - Offcanvas：初學者的指南

嘿，未來的網頁開發者們！今天，我們將要深入Bootstrap的Offcanvas組件的奇妙世界。如果你是新手，別擔心——我將成為你的友好指南，我們將一起逐步探索這個主題。所以，拿起你喜歡的飲料，放鬆一下，讓我們踏上這個令人興奮的旅程！

Bootstrap - Offcanvas

概覽

首先，先來了解一下什麼是Offcanvas。想像你在一個小小的公寓裡，需要更多的儲存空間。突然，一個從牆上滑出來的隱藏隔間——這在網頁設計中基本上就是Offcanvas！它是一個可以滑進滑出的側邊欄，為導航、表單或任何你想暫時收起來的內容提供額外的空間。

Offcanvas組件

在我們開始建構之前，讓我們分解一下Offcanvas的主要部分：

觸發器：這通常是一個按鈕，當點擊時，會顯示Offcanvas。
Offcanvas本身：滑入視圖的面板。
背景幕：一個可選的遮罩，當Offcanvas打開時會將主內容變暗。

現在，讓我們看看這些組件如何在代碼中結合！

實時演示

這裡有一個簡單的例子來讓我們開始：

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">
打開Offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas標題</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="關閉"></button>
</div>
<div class="offcanvas-body">
<p>這是Offcanvas的內容。你可以把任何你想要的東西放在這裡！</p>
</div>
</div>

讓我們來分解這個：

按鈕有data-bs-toggle="offcanvas"來告訴Bootstrap它是一個Offcanvas觸發器。
data-bs-target="#demoOffcanvas"將按鈕鏈接到具有匹配ID的Offcanvas。
Offcanvas本身是一個div，類別為offcanvas。
offcanvas-start將它定位在左邊（我們稍後會探索其他位置）。
頭部包含標題和關閉按鈕。
邏輯部分是你的主要內容所在的地方。

邏輯滾動

默認情況下，當Offcanvas打開時，背後的body無法滾動。但如果你想要允許滾動呢？簡單！只需在你的Offcanvas div中添加data-bs-scroll="true"：

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="scrollableOffcanvas">
<!-- Offcanvas內容 -->
</div>

邏輯滾動和背景幕

想要允許滾動但保留那個時尚的背景幕？沒問題！添加data-bs-backdrop="false"以及data-bs-scroll="true"：

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="scrollableBackdropOffcanvas">
<!-- Offcanvas內容 -->
</div>

靜止背景幕

如果你希望Offcanvas除非被明確關閉（即，點擊外部不會關閉它），請使用data-bs-backdrop="static"：

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdropOffcanvas">
<!-- Offcanvas內容 -->
</div>

暗色Offcanvas

想要一個有點哥特風的Offcanvas？讓我們來個暗色！只需添加text-bg-dark類別：

<div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="darkOffcanvas">
<!-- Offcanvas內容 -->
</div>

响應式

這裡有一個很酷的技巧——你可以讓你的Offcanvas響應式！它在小屏幕上可以是Offcanvas，在大屏幕上可以是內聯內容。使用.offcanvas-{斷點}類別：

<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="responsiveOffcanvas">
<!-- Offcanvas內容 -->
</div>

這個Offcanvas將在大於'lg'斷點的屏幕上為內聯內容，在小屏幕上為Offcanvas。

定位

記得上次我提到我們可以改變位置嗎？這就是方法：

類別	位置
`offcanvas-start`	左邊
`offcanvas-end`	右邊
`offcanvas-top`	頂部
`offcanvas-bottom`	底部

例如，將Offcanvas定位在右邊：

<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas">
<!-- Offcanvas內容 -->
</div>

無障礙

最後但絕對不是最不重要的，讓我們來談論如何讓我們的Offcanvas對所有用戶無障礙：

使用aria-labelledby將Offcanvas鏈接到它的標題：

<div class="offcanvas offcanvas-start" tabindex="-1" id="accessibleOffcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">無障礙Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="關閉"></button>
</div>
<!-- Offcanvas內容 -->
</div>

在觸發器按鈕上使用aria-controls：

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#accessibleOffcanvas" aria-controls="accessibleOffcanvas">
打開無障礙Offcanvas
</button>

那就這樣，各位！你現在已經是Offcanvas專家了。記住，熟練是由練習而來的，所以不要害怕在你的專案中試驗這些組件。誰知道呢？你可能會創造出網頁設計中下一個大熱的滑動 sensation！

快樂編程，願你的Offcanvas總是滑動得順暢！

Credits: Image by storyset