Σύστημα δίκτυου Bootstrap 5

Σύστημα κουλούρας

Το σύστημα κουλούρας Bootstrap είναι κατασκευασμένο με flexbox, επιτρέποντας μέχρι 12 στήλons στη σελίδα.

Αν δεν θέλεις να χρησιμοποιήσεις όλα τα 12 στήλons ξεχωριστά, μπορείς να τα συνδυάσεις για να δημιουργήσεις πιο πλατιά στήλons:

Το σύστημα κουλούρας είναι ταχύτερο και τα στήλons αναδιατάσσονται αυτόματα ανάλογα με το μέγεθος της οθόνης.

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

Κλάσεις κουλούρας

Το σύστημα κουλούρας Bootstrap 5 παρέχει έξι κλάσεις:

  • .col- (Συμπαγής συσκευή - πλάτος οθόνης μικρότερο από 576px)
  • .col-sm- (Μικρή συσκευή - πλάτος οθόνης ίσο ή μεγαλύτερο από 576px)
  • .col-md- (Μεσαία συσκευή - πλάτος οθόνης ίσο ή μεγαλύτερο από 768px)
  • .col-lg- (Μεγάλη συσκευή - πλάτος οθόνης ίσο ή μεγαλύτερο από 992px)
  • .col-xl- (Οπωρώδες συσκευή - πλάτος οθόνης ίσο ή μεγαλύτερο από 1200px)
  • .col-xxl- (Μακροσκελής συσκευή - πλάτος οθόνης ίσο ή μεγαλύτερο από 1400px)

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

Συμβουλή:Κάθε κλάση είναι αναλογικά μεγαλύτερη, οπότε αν θέλεις να ρυθμίσεις την ίδια πλάτος για sm και md, πρέπει απλώς να καθορίσεις το sm.

Η βασική δομή της κουλούρας Bootstrap 5

Εδώ είναι η βασική δομή της κουλούρας Bootstrap 5:

<!-- Ελέγχει το πλάτος των στηλών και τον τρόπο τους στην οθόνη των διαφορετικών συσκευών -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- ή αφήστε τον Bootstrap να χειρίζεται τη διάταξη -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Προσπαθήστε το شخصικά

Πρώτο παράδειγμα: Δημιουργία γραμμής (<div class = "row">). Έπειτα, προσθέστε τον απαραίτητο αριθμό των στηλών (με .col-*-* την ετικέτα της κλάσης). Το πρώτο αστέρι (*) αντιπροσωπεύει την αλληλεπίδραση: sm, md, lg, xl ή xxl, ενώ το δεύτερο αστέρι αντιπροσωπεύει έναν αριθμό, ο οποίος πρέπει να συναρμολογείται σε 12 ανά γραμμή.

Δεύτερη παράδειγμα: Δεν δίνετε σε κάθε col Προσθέστε έναν αριθμό, αντί να επιτρέψετε στο Bootstrap να χειρίζεται τη διάταξη, για να δημιουργήσετε ίσες στήλες: δύο "col" Ενότητα = 50% πλάτους κάθε στήλης, ενώ τρεις στήλες = 33.33% πλάτους κάθε στήλης. Τέσσερις στήλες = 25% πλάτους κ.λπ. Μπορείτε επίσης να χρησιμοποιήσετε .col-sm|md|lg|xl|xxl Κάνει τις στήλες αλληλεπιδραστικές.

Επιλογές δίκτυου

Το παρακάτω κεφάλαιο συνοψίζει τον τρόπο λειτουργίας του συστήματος δίκτυου Bootstrap 5 σε διαφορετικές διαστάσεις οθόνης:

Πολύ μικρή (<576px) Μικρή (>=576px) Μεσαία (>=768px) Μεγάλη (>=992px) Πολλά μεγαλύτερη (>=1200px) Μεγάλη (>=1400px)
Πρόθεμα κλάσης .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Διέγερση δίκτυου Πάντα οριζόντια Ανοίγει κλειστό, οριζόντια πάνω από το σημείο διασπασμού Ανοίγει κλειστό, οριζόντια πάνω από το σημείο διασπασμού Ανοίγει κλειστό, οριζόντια πάνω από το σημείο διασπασμού Ανοίγει κλειστό, οριζόντια πάνω από το σημείο διασπασμού Ανοίγει κλειστό, οριζόντια πάνω από το σημείο διασπασμού
Πλάτος κουτί Καμία (αυτόματο) 540px 720px 960px 1140px 1320px
Πρόσβαση Καθισμένης θέσης κινητό Όρθιας θέσης κινητό Tablet Λάπτοπ Λάπτοπ και επιτραπέζιος υπολογιστής Λάπτοπ και επιτραπέζιος υπολογιστής
Αριθμός στήλης 12 12 12 12 12 12
Πλάτος διαδρομής 1.5rem (στα κάθετα της στήλης .75rem) 1.5rem (στα κάθετα της στήλης .75rem) 1.5rem (στα κάθετα της στήλης .75rem) 1.5rem (στα κάθετα της στήλης .75rem) 1.5rem (στα κάθετα της στήλης .75rem) 1.5rem (στα κάθετα της στήλης .75rem)
Προσβάσιμη ενσωμάτωση Ναι Ναι Ναι Ναι Ναι Ναι
Αποκλιμάκωση Ναι Ναι Ναι Ναι Ναι Ναι
Σειριακή τάξη Ναι Ναι Ναι Ναι Ναι Ναι