Δίκτυο: Υποσυσκευές Bootstrap 5

Προτεινόμενα μαθήματα:

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

Αν υποθέσουμε ότι έχουμε ένα απλό σχήμα με δύο στήλες. Ελπίζουμε οι στήλες να είναιΌλαΚατανομή συσκευών 25% / 75%.

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

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

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

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

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

Παράδειγμα

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

Προσπαθήστε το προσωπικά

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

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

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

Προσπαθήστε το προσωπικά

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