Δίκτυο Bootstrap 5: XXL

Παράδειγμα Δικτύου XXL συσκευών

XΜικρή Μικρή Μεσαία Μεγάλη Εκτενής Μεγάλη XXL
προθερμημένα κλάματα .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
πλάτος οθόνης <576px >=576px >=768px >=992px >=1200px >=1400px

Η XXL συσκευή ορίζεται ως συσκευή με 1400 pixel και πάνωχρησιμοποιούμενη πλάτος οθόνης.

Η παρακάτω παράδειγμα θα δημιουργήσει 50/50% διάσπαση σε μεσαίες, μεγάλες και υπερμεγάλες συσκευές, και 25/75% διάσπαση σε XXL συσκευές. Σε μικρές και υπερμικρές συσκευές, θα ενεργοποιηθεί αυτόματα η προσαρμογή (100%):

Παράδειγμα

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>Το World Wide Fund for Nature (WWF), ιδρύθηκε στις 29 Απριλίου 1961, το εμβληματικό του σύμβολο είναι ένας γιγαπάνθος...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>Το 1980, το WWF επίσημα έφτασε στην Κίνα, κατεβασμένο από την πρόσκληση της κινεζικής κυβέρνησης να ξεκινήσει τη προστασία του γιγαπάνθου και του φυσικού περιβάλλοντος...</p>
    </div>
  </div>
</div>

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

Σημείωση:Βεβαιωθείτε ότι η συνολική τιμή είναι πάντα 12.

χρησιμοποιώντας μόνο XXL

Στο παρακάτω παράδειγμα, έχουμε καθορίσει μόνο .col-xxl-6 Κλάση (χωρίς .col-md-* και / ή .col-sm-*）。Αυτό σημαίνει ότι τα εξαιρετικά μεγάλα συσκευές θα διασπάσουν 50/50%. Ωστόσο, για υπερμεγέθη, μεγάλα, μεσαία, μικρά και εξαιρετικά μικρά συσκευές, θα είναι οριζόντια (100% πλάτος):

Παράδειγμα

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>Το World Wide Fund for Nature (WWF), ιδρύθηκε στις 29 Απριλίου 1961, το εμβληματικό του σύμβολο είναι ένας γιγαπάνθος...</p>
    </div>
    <div class="col-xxl-6">
      <p>Το 1980, το WWF επίσημα έφτασε στην Κίνα, κατεβασμένο από την πρόσκληση της κινεζικής κυβέρνησης να ξεκινήσει τη προστασία του γιγαπάνθου και του φυσικού περιβάλλοντος...</p>
    </div>
  </div>
</div>

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

Αυτόματη διάταξη στήλων

Στο Bootstrap 5, υπάρχει ένας απλός τρόπος για να δημιουργήσετε ίσες στήλες για όλες τις συσκευές: απλά από .col-xxl-* Αφαιρέστε τα αριθμήματα και χρησιμοποιήστε μόνο στο στοιχείο col .col-xxl Κλάση. Το Bootstrap θα αναγνωρίσει πόσες στήλες υπάρχουν και κάθε στήλη θα έχει την ίδια πλάτος.

Αν το μέγεθος της οθόνηςκάτω από 1400px，οι στήλες θα είναι οριζόντια:

<!-- Δύο στήλες: η πλάτος τους είναι 50% σε εξαιρετικά μεγάλα συσκευές -->
<div class="row">
  <div class="col-xxl">1 από 2</div>
  <div class="col-xxl">2 από 2</div>
</div>
<!-- Τέσσερα στήλες: η πλάτος τους είναι 25% σε εξαιρετικά μεγάλα συσκευές -->
<div class="row">
  <div class="col-xxl">1 από 4</div>
  <div class="col-xxl">2 από 4</div>
  <div class="col-xxl">3 από 4</div>
  <div class="col-xxl">4 από 4</div>
</div>

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