Bootstrap 5 ออฟแคนซัส

Offcanvas (Canvas)

Offcanvas คล้าย Modal (ซ่อนตัวโดยเริ่มและแสดงเมื่อมีการกดเลือก), แต่ต่างออกไปที่มันมักถูกใช้เป็นเมนูนำทางด้านข้าง.

วิธีที่จะสร้าง 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>
<!-- ปุ่มเปิดแถบด้านข้าง sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  เปิดแถบด้านข้าง Offcanvas
</button>

ทดลองเอง

การอธิบายตัวอย่าง

.offcanvas รูปแบบที่สร้างแถบด้านข้าง offcanvas

.offcanvas-start รูปแบบตำแหน่ง offcanvas และตั้งความกว้างเป็น 400px สำหรับรูปแบบตำแหน่งเพิ่มเติม ดูตัวอย่างด้านล่าง

.offcanvas-title รูปแบบที่มีขอบเขตนอกเหนือและความสูงแถวที่เหมาะสม

ดังนั้น ใส่เนื้อหาของคุณเข้าไปใน .offcanvas-body รูปแบบ

ในกรณีที่ต้องการเปิดแถบด้านข้าง offcanvas คุณจำเป็นต้องใช้ <button> หรือ <a> ตัวแทน .offcanvas id ของตัวแทน (ในตัวอย่างของเราคือ #demo）

ในกรณีที่ต้องการใช้ <a> องค์ประกอบที่เปิดแถบด้านข้าง offcanvas คุณสามารถใช้ขอบเขต href แทน data-bs-target ขอบเขต #demo。

ตำแหน่ง Offcanvas

ใช้ .offcanvas-start|end|top|bottom จัดตั้ง offcanvas ที่ด้านซ้าย ด้านขวา ด้านบน หรือด้านล่าง:

ตัวอย่างที่ติดด้านขวา

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

ทดลองเอง

ตัวอย่างที่ติดด้านบน

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

ทดลองเอง

ตัวอย่างที่ติดลง

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

ทดลองเอง