Bootrap 5 OffCanvas

Offcanvas（帆布）

Offcanvas（帆布）類似於模態（默認隱藏並在激活時顯示），不同之處在於它通常用作側邊欄導航菜單。

如何創建 Offcanvas 侧邊欄

以下展示如何創建 offcanvas 侧邊欄：

範例

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">標題</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>一些文本。一些文本。一些文本。</p>
    <p>一些文本。一些文本。一些文本。</p>
    <button class="btn btn-secondary" type="button">按鈕</button>
  </div>
</div>
<!-- Butang untuk membuka sidebar offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Buka Sidebar Offcanvas
</button>

Cuba Sendiri

Pengertian Contoh

.offcanvas kelas membuat sidebar offcanvas.

.offcanvas-start kelas menempatkan offcanvas dan mengatur lebarnya ke 400px. Untuk lebih banyak kelas letakan, lihat contoh di bawah.

.offcanvas-title kelas memastikan marjin luar dan tinggi baris yang sesuai.

Kemudian, tambahkan kandungan anda ke .offcanvas-body kelas.

Untuk membuka sidebar offcanvas, anda mesti guna <button> atau <a> elemen menunjuk .offcanvas ID wadah (dalam contoh kami adalah #demo）。

Untuk menggunakan <a> Elemen membuka sidebar offcanvas, anda boleh guna atribut href bukannya data-bs-target Atribut menunjuk #demo.

Letakkan Offcanvas

Guna .offcanvas-start|end|top|bottom Letakkan offcanvas ke kiri, kanan, atas atau bawah:

Contoh Kanan

<div class="offcanvas offcanvas-end" id="demo">

Cuba Sendiri

Contoh Atas

<div class="offcanvas offcanvas-top" id="demo">

Cuba Sendiri

Contoh Bawah

<div class="offcanvas offcanvas-bottom" id="demo">

Cuba Sendiri