Offcanvas στο Bootstrap 5

Offcanvas (帆布)

Η Offcanvas (帆布) είναι παρόμοια με το modal (προεπιλεγμένοmente κρυμμένο και εμφανίζεται όταν ενεργοποιείται), με τη διαφορά ότι συχνά χρησιμοποιείται ως πλευρική πλοήγηση μενού.

Πώς να δημιουργήσετε 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>
<!-- Κουμπί για να ανοίξετε το offcanvas πλάγιο παράθυρο -->
<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">

Δοκιμάστε το προσωπικά