Δίκτυο: Μεγάλα Εγκαταστάματα Bootstrap 5

Πρόγραμμα προτιμήσεων:

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

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

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

αλλά στις μεγάλες συσκευές, ο σχεδιασμός διαίρεσης 33% / 66% μπορεί να είναι καλύτερος.

Οι μεγάλοι συσκευές ορίζονται ως πλάτος οθόνηςαπό 992 εικονοστοιχεία μέχρι 1199 εικονοστοιχεία。

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

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

Στις μικρές συσκευές, χρησιμοποιήστε τα κλάση που περιέχουν -sm- των κλάσεων. Στις μεσαίες συσκευές, χρησιμοποιήστε τα κλάση που περιέχουν -md- των κλάσεων. Στις μεγάλες συσκευές, χρησιμοποιήστε τα κλάση που περιέχουν -lg- των κλάσεων.

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

Παράδειγμα

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

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

Σημείωση:Βεβαιωθείτε ότι η συνολική τους τιμή είναι ίση ή μικρότερη από 12 (δεν χρειάζεται να χρησιμοποιήσετε όλες τις διαθέσιμες 12 στήλες):

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

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

Παράδειγμα

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

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

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

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

Αν το μέγεθος της οθόνηςΜικρότερη από 992pxΗ στήλη θα είναι οριζόντια:

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

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