Bootstrap 5 Offcanvas

Offcanvas (Bức tranh)

Offcanvas tương tự như Modal (mặc định ẩn và hiển thị khi được kích hoạt), khác biệt là nó thường được sử dụng làm menu điều hướng thanh bên.

Cách tạo thanh bên Offcanvas

Dưới đây là ví dụ về cách tạo thanh bên offcanvas:

Ví dụ

<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Tiêu đề</h1>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p> Một số văn bản. Một số văn bản. Một số văn bản.</p>
    <p> Một số văn bản. Một số văn bản. Một số văn bản.</p>
    <button class="btn btn-secondary" type="button">Nút</button>
  </div>
</div>
<!-- Nút mở thanh bên offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
  Mở thanh bên Offcanvas
</button>

Thử nghiệm ngay

Giải thích ví dụ

.offcanvas lớp tạo thanh bên offcanvas.

.offcanvas-start lớp định vị offcanvas và đặt chiều rộng là 400px. Để biết thêm các lớp định vị, xem ví dụ dưới đây.

.offcanvas-title lớp đảm bảo khoảng cách bên ngoài và chiều cao dòng hợp lý.

Sau đó, thêm nội dung của bạn vào .offcanvas-body trong lớp.

Để mở thanh bên offcanvas, bạn phải sử dụng <button> hoặc <a> thiết bị chỉ định .offcanvas ID của khung (trong ví dụ của chúng tôi là #demo）。

Để sử dụng <a> Thiết bị mở thanh bên offcanvas, bạn có thể sử dụng thuộc tính href thay vì data-bs-target Thuộc tính chỉ định #demo.

Định vị Offcanvas

Vui lòng sử dụng .offcanvas-start|end|top|bottom Đặt offcanvas ở bên trái, bên phải, trên cùng hoặc dưới cùng:

Mẫu bên phải

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

Thử nghiệm ngay

Mẫu trên cùng

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

Thử nghiệm ngay

Mẫu dưới cùng

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

Thử nghiệm ngay