Offcanvas to wtyczka Bootstrap 5 dla menu paska bocznego, które pojawia się na ekranie od lewej, prawej lub dolnej zgodnie z wymaganiami użytkownika. OffCanvas może być również używany jako menu wtórne lub menu główne i może być uruchomione przez przycisk lub link. Gdy pasek boczny poza Canvas jest uruchamiany, blokuje stronę przed dowolną interakcją, ponieważ gdy menu ujawnia się, strona ukrywa się za nią.

W tym artykule zawiera szczegółowy przewodnik na temat:

• Jak stworzyć pasek boczny OffCanvas
• Różne pozycje paska bocznego OffCanvas

Jak stworzyć pasek boczny OffCanvas

Aby utworzyć pasek boczny OffCanvas, dodaj .Offcanvas klasa w tagu Div z pozycją odkrywania .Offcanvas-start i wyjątkowy ID. Następnie owinąć tę div wokół Div z klasą .Offcanvas-Header który zawiera tytuł paska bocznego z przyciskiem zwolnienia i div z klasą .Offcanvas-Body który zawiera zawartość paska bocznego.

Wreszcie, aby uruchomić użycie paska bocznego OffCanvas data-bs-toggle = ”OffCanvas” I data-bs-cesarget = ”#id” Aby podłączyć pasek boczny za pomocą przycisku lub linku, który po kliknięciu ujawnia pasek boczny OffCanvas:

Kod

Menu

Dom
O
Produkt
Skontaktuj się z nami
Ustawienia

Pasek boczny OffCanvas

Przycisk poniżej otworzy pasek boczny OffCanvas.

otwarty

W ten sposób tworzysz pasek boczny OffCanvas w Bootstrap 5.

Pozycje OffCanvas

Pasek boczny OffCanvas można ujawnić z dowolnej krawędzi ekranu zgodnie z wymaganiami użytkownika. Aby określić pozycję OffCanvas, po prostu dodaj .OffCanvas-Start/End/Top/dolny klasa z .Offcanvas klasa.

Początek

.Offcanvas-start klasa ujawni pasek boczny z lewej strony strony.

Koniec

.Offcanvas-end klasa ujawni pasek boczny z prawej strony strony.

Szczyt

.Offcanvas-top klasa ujawni pasek boczny z górnej strony strony.

Spód

.OffCanvas-Bottom klasa ujawni pasek boczny od dolnej strony strony.

Wniosek

Offcanvas Pasek boczny jest tworzony przez dodanie .Offcanvas klasa do div. Następnie dodaj .OffCanvas-Start/End/Top/dolny Aby określić pozycję paska bocznego i ID atrybut, aby nadać pasku bocznym unikalny identyfikator. Następnie owinąć tę div wokół Div z klasą .Offcanvas-Header który zawiera tytuł paska bocznego z przyciskiem zwolnienia i div z klasą .Offcanvas-Body który zawiera zawartość paska bocznego. Teraz uruchomić użycie paska bocznego OffCanvas data-bs-toggle = ”OffCanvas” I data-bs-cesarget = ”#id” Aby podłączyć pasek boczny za pomocą przycisku lub linku, który po kliknięciu ujawnia pasek boczny OffCanvas.