Συστηματική Δικτύωση Bootstrap 5: Μεσαία Συσκευή

Παράδειγμα δίκτυου μεσαίων συσκευών

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

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

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

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

Η μεσαία συσκευή ορίζεται ως πλάτος οθόνηςΑπό 768 εικονοστοιχεία έως 991 εικονοστοιχεία.

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

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

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

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

Παράδειγμα

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

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

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

μόνο στο Medium

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

Παράδειγμα

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

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

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

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

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

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

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

Το επόμενο κεφάλαιο θα δείξει πώς να προσθέσουμε διαφορετικές ποσοστιαίες αναδιανομές για μεγάλα συσκευές.