Δίκτυο: Μικροοπτικά συσκευές Bootstrap 5

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

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

Ας υποθέσουμε ότι έχουμε έναν απλό σχεδιασμό με δύο στήλες. Για μικρές συσκευές, θέλουμε να κατανομήσουμε τις στήλες 25% / 75%.

Οι μικρές συσκευές ορίζονται ως πλάτος οθόνηςΑπό 576 pixel έως 767 pixel.

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

Προσθέτουμε τις παρακάτω κλάσεις στις δύο στήλες:

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

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

Παράδειγμα

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

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

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

Για κατανομή 33.3% / 66.6%，πρέπει να χρησιμοποιήσετε .col-sm-4 και .col-sm-8Για κατανομή 50% / 50%，πρέπει να χρησιμοποιήσετε .col-sm-6 και .col-sm-6) :

Παράδειγμα

Κατανομή 33.3/66.6%
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>Το World Wide Fund for Nature (WWF), ιδρύθηκε στις 29 Απριλίου 1961, το λογότυπο του οποίου είναι ένας γιγαπάνθος...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>Το 1980, το WWF ήρθε επίσημα στην Κίνα, κατετάγη από την κινεζική κυβέρνηση για να εκτελέσει τη προστασία του γιγαπάνθου και του φυσικού του περιβάλλοντος...</p>
    </div>
  </div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Το World Wide Fund for Nature (WWF), ιδρύθηκε στις 29 Απριλίου 1961, το λογότυπο του οποίου είναι ένας γιγαπάνθος...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Το 1980, το WWF ήρθε επίσημα στην Κίνα, κατετάγη από την κινεζική κυβέρνηση για να εκτελέσει τη προστασία του γιγαπάνθου και του φυσικού του περιβάλλοντος...</p>
    </div>
  </div>
</div>

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

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

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

Αν το μέγεθος της οθόνηςΚατώτερο από 576pxΗ στήλη θα στοιβάζεται οριζόντια:

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

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

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