Μοντέλα στο Bootstrap 5

Μοδάλιο

Το Μοδάλιο είναι ένα παράθυρο διαλόγου/εμφάνισης που εμφανίζεται στην επάνω περιοχή της τρέχουσας σελίδας:

Πώς να δημιουργηθεί μονάδα

Παρακάτω δείγεται πώς να δημιουργηθεί μια βασική μονάδα:

Παράδειγμα

<!-- Κουμπί ανοίγματος μονάδας -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Άνοιγμα μονάδας
</button>
<!-- Μονάδα -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Τίτλος μονάδας -->
      <div class="modal-header">
        <h4 class="modal-title">Τίτλος Μονάδας</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Κύρια μονάδα -->
      <div class="modal-body">
        Κύρια μονάδα ..
      </div>
      <!-- Πίσω πόδι μονάδας -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Κλείσιμο</button>
      </div>
    </div>
  </div>
</div>

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

προσθέστε κίνηση

Παρακαλώ χρησιμοποιήστε .fade Η κλάση προστίθεται για να προσθέσει εφέ εξαφάνισης και εμφάνισης κατά την ανοίγηση και την κλείσιμο της μονάδας:

Παράδειγμα

<!-- Ξαφνική μονάδα -->
<div class="modal fade"></div>
<!-- Μονάδα χωρίς αναπτυξιακή κίνηση -->
<div class="modal"></div>

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

Μέγεθος Μονάδας

Προσθέστε στην μικρή μονάδα .modal-sm κλάση (max-width 300px) για τη μεγάλη μονάδα .modal-lg κλάση (max-width 800px) ή προσθέστε για την υπερμεγάλη μονάδα .modal-xl για να αλλάξετε το μέγεθος της μονάδας (max-width 1140 pixel). Η προεπιλεγμένη μέγιστη πλάτος είναι 500 pixel.

Παρακαλώ μεταφέρετε .modal-dialog Προσθέστε τις κλάσεις και τις διαστάσεις στην <div> Στοιχεία:

Μικρή Μονάδα

<div class="modal-dialog modal-sm">

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

Μεγάλη Μονάδα

<div class="modal-dialog modal-lg">

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

Μονάδα Μεγάλης Κλίμακας

<div class="modal-dialog modal-xl">

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

Βελτιστοποιημένα, το μέγεθος της μονάδας είναι "medium" (max-width 500px).

Μονάδα πλήρους οθόνης

Αν θέλετε η μονάδα να καλύπτει ολόκληρη τη γωνία και την ύψος της σελίδας, χρησιμοποιήστε .modal-fullscreen Κλάση:

Παράδειγμα

<div class="modal-dialog modal-fullscreen">

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

Απαντησiva μονάδα πλήρους οθόνης

Μπορείτε επίσης να χρησιμοποιήσετε .modal-fullscreen-*-* Η κλάση ελέγχει πότε η μονάδα θα εμφανιστεί πλήρως οθόνης:

Κλάση Περιγραφή Παράδειγμα
.modal-fullscreen-sm-down Περισσότερο από 576px οθόνη πλήρους οθόνης Δοκιμάστε το προσωπικά
.modal-fullscreen-md-down Περισσότερο από 768px οθόνη πλήρους οθόνης Δοκιμάστε το προσωπικά
.modal-fullscreen-lg-down Περισσότερο από 992px οθόνη πλήρους οθόνης Δοκιμάστε το προσωπικά
.modal-fullscreen-xl-down Περισσότερο από 1200px οθόνη πλήρους οθόνης Δοκιμάστε το προσωπικά
.modal-fullscreen-xxl-down Περισσότερο από 1400px οθόνη πλήρους οθόνης Δοκιμάστε το προσωπικά

Κεντρική μονάδα

Με τη χρήση .modal-dialog-centric Κλάση, για τη μέση και οριζόντια κεντρική τοποθέτηση της μονάδας μέσα στη σελίδα:

Παράδειγμα

<div class="modal-dialog modal-dialog-centered">

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

Ρολογιακή μονάδα

Όταν υπάρχει πολύ περιεχόμενο μέσα στη μονάδα, προστίθεται μια λωρίδα πλοήγησης στη σελίδα. Δείτε το παρακάτω παράδειγμα για να κατανοήσετε:

Παράδειγμα

<div class="modal-dialog">

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

Ωστόσο, μέσω της χρήσης .modal-dialog-scrollable Προσθέστε σε .modal-dialog Μπορεί να γυρίσει μόνο μέσα στη μονάδα, και όχι στην ίδια τη σελίδα:

Παράδειγμα

<div class="modal-dialog modal-dialog-scrollable">

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