Δίκτυο Bootstrap 5: Υπερμεγάλα Συσκευές

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

XSmall Small Medium Large Extra Large XXL
Πρόθεμα κλάσης .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Πλάτος οθόνης <576px >=576px >=768px >=992px >=1200px >=1400px

Στο προηγούμενο κεφάλαιο, παρουσιάσαμε ένα παράδειγμα δίκτυου που περιλαμβάνει κλάσεις για μικρές, μεσαίες και μεγάλες συσκευές. Χρησιμοποιήσαμε δύο div (στήλες) και στο μικρό μέγεθος συσκευής έγινε διαίρεση 25%/75%, στο μεσαίο μέγεθος συσκευής 50%/50% και στο μεγάλο μέγεθος συσκευής 33%/66%:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Αλλά σε συσκευές xlarge, ο σχεδιασμός διαίρεσης 20% / 80% μπορεί να είναι καλύτερος.

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

Για συσκευές xlarge, θα χρησιμοποιήσουμε .col-xl-* Κλάση:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

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

Παράδειγμα

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>Το Παγκόσμιο Ναό της Φύσης (WWF), ιδρύθηκε στις 29 Απριλίου 1961, το εμβληματικό του σύμβολο είναι ένα μεγάλο γιγαπάνθος...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>Το 1980, το WWF επίσημα ήρθε στην Κίνα, κατεβασμένο από την πρόσκληση της κινεζικής κυβέρνησης να αναπτύξει την προστασία του γιγαπάνθου και του φυσικού του περιβάλλοντος στην Κίνα...</p>
    </div>
  </div>
</div>

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

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

Χρησιμοποιούμε μόνο το XLarge

Στο παρακάτω παράδειγμα, καθορίζουμε μόνο .col-xl-6 Κλάση (χωρίς .col-lg-*、.col-md-* και/ή .col-sm-*）。Αυτό σημαίνει ότι οι συσκευές xlarge και xxlarge θα διαιρεθούν σε 50/50%. Ωστόσο, για τις συσκευές large, medium, small και extra small, θα τοποθετηθούν κάθετα (100% πλάτος):

Παράδειγμα

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

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

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

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

Αν το μέγεθος του οθόνηςΜικρότερη από 1200px，οι στήθασα θα τοποθετηθούν οριζόντια:

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

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