Δίκτυο Bootstrap 5

Σύστημα Δικτύου Bootstrap 5

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

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

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

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

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

Κλάσεις πλέγματος

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

  • .col- (υπερμικρά συστήματα - πλάτος οθόνης μικρότερο από 576px)
  • .col-sm- (μικρά συστήματα - πλάτος οθόνης ίσο ή μεγαλύτερο από 576px)
  • .col-md- (μεσαία συστήματα - πλάτος οθόνης ίσο ή μεγαλύτερο από 768 εικονοστοιχεία)
  • .col-lg- (μεγάλα συστήματα - πλάτος οθόνης ίσο ή μεγαλύτερο από 992 εικονοστοιχεία)
  • .col-xl- (πληρώματα xlarge - πλάτος οθόνης ίσο ή μεγαλύτερο από 1200px)
  • .col-xxl- (πληρώματα xxlarge - πλάτος οθόνης ίσο ή μεγαλύτερο από 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" Εлемент = κάθε col έχει 50% πλάτος, ενώ τρεις cols έχουν κάθε col 33.33% πλάτος. Τέσσερις στήλες = 25% πλάτος, κ.λπ. Μπορείτε επίσης να χρησιμοποιήσετε .col-sm|md|lg|xl|xxl Δώστε στις στήλες αντανακλαστικότητα.

Παρακάτω έχουμε συγκεντρώσει μερικά βασικά παραδείγματα διάταξης δίνοντας του Bootstrap 5.

Τρεις ίσες στήλες

Το παρακάτω παράδειγμα δείχνει πώς να δημιουργήσετε τρεις ίσες στήλες σε όλες τις συσκευές και διαστάσεις οθόνης:

Παράδειγμα

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

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

Αντανακλαστικές στήλες

Το παρακάτω παράδειγμα δείχνει πώς να δημιουργήσετε τέσσερις ίσες στήλες που ξεκινούν από μια ταμπλέτα και να επεκτείνετε σε μεγάλη επιφάνεια εργασίας桌：Σε διάσταση μικρότερη από 576px, οι στήλες θα συναρμολογούνται αυτόματα σε κινητά ή οθόνες:

Παράδειγμα

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

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

Δύο μη ισόπλαθες αντανακλαστικές στήλες

Το παρακάτω παράδειγμα δείχνει πώς να αποκτήσετε δύο διαφορετικές πλάθους στήλες σε μια ταμπλέτα και να επεκτείνετε σε μεγάλη επιφάνεια εργασίας桌：

Παράδειγμα

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

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

Συμβουλή:Θα μάθετε για αυτά στη συνέχεια του εγχειριδίου. Σύστημα δίνοντας Περισσότερες πληροφορίες.