Bootstrap 5 Offcanvas
Tranh canvas
Offcanvas tương tự như modals (ẩn theo mặc định và hiển thị khi được kích hoạt), ngoại trừ nó thường được sử dụng làm menu điều hướng thanh bên.
Phần mở đầu
Một số văn bản lorem ipsum.
Một số văn bản lorem ipsum.
Cách tạo thanh bên Offcanvas
Ví dụ sau đây cho thấy 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">Heading</h1>
<button
type="button" class="btn-close text-reset"
data-bs-dismiss="offcanvas"></button>
</div>
<div
class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn
btn-secondary" type="button">A Button</button>
</div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn
btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button> Hãy tự mình thử »Ví dụ giải thích
Lớp .offcanvas tạo thanh bên offcanvas.
Lớp .offcanvas-start định vị offcanvas và làm cho nó rộng 400px. Xem các ví dụ bên dưới để biết thêm các lớp định vị.
Lớp .offcanvas-title đảm bảo lề và chiều cao dòng phù hợp.
Sau đó, thêm nội dung của bạn vào lớp .offcanvas-body .
Để mở thanh bên offcanvas, bạn phải sử dụng phần tử <button> hoặc <a> trỏ đến id của vùng chứa .offcanvas ( #demo trong ví dụ của chúng tôi).
Để mở thanh bên offcanvas bằng phần tử <a> , bạn có thể trỏ tới #demo bằng thuộc tính href, thay vì thuộc tính data-bs-target .
Vị trí ngoài canvas
Sử dụng .offcanvas-start|end|top|bottom để định vị offcanvas ở bên trái, bên phải, trên cùng hoặc dưới cùng:
Ví dụ đúng
<div class="offcanvas offcanvas-end"
id="demo">Phần mở đầu
Một số văn bản lorem ipsum.
Một số văn bản lorem ipsum.
Ví dụ hàng đầu
<div class="offcanvas offcanvas-top"
id="demo">Phần mở đầu
Một số văn bản lorem ipsum.
Một số văn bản lorem ipsum.
Ví dụ dưới cùng
<div class="offcanvas offcanvas-bottom"
id="demo">Phần mở đầu
Một số văn bản lorem ipsum.
Một số văn bản lorem ipsum.
Menu Canvas đáp ứng
Bạn cũng có thể kiểm soát thời điểm bạn muốn ẩn hoặc hiển thị menu offcanvas trên các độ rộng màn hình khác nhau, với các lớp .offcanvas-sm|md|lg|xl|xxl :
Menu Canvas tắt tối
Sử dụng lớp .text-bg-dark để tạo menu offcanvas tối.
Mẹo: Chúng tôi cũng đã thêm lớp .btn-close-white vào .btn-close , để tạo nút đóng màu trắng trông đẹp mắt trên nền tối:
Ví dụ
<div class="offcanvas offcanvas-end"
id="demo">
<button type="button" class="btn-close
btn-close-white" data-bs-dismiss="offcanvas"></button>Phần mở đầu
Một số văn bản lorem ipsum.
Một số văn bản lorem ipsum.
