Παραδείγματα πλέγματος εκκίνησης
Βασικές διατάξεις πλέγματος για εξοικείωση με την κατασκευή μέσα στο σύστημα πλέγματος Bootstrap.
Σε αυτά τα παραδείγματα η .themed-grid-col
κλάση προστίθεται στις στήλες για να προσθέσει κάποιο θέμα. Αυτή δεν είναι μια κλάση που είναι διαθέσιμη στο Bootstrap από προεπιλογή.
Πέντε επίπεδα πλέγματος
Υπάρχουν πέντε επίπεδα στο σύστημα πλέγματος Bootstrap, ένα για κάθε σειρά συσκευών που υποστηρίζουμε. Κάθε επίπεδο ξεκινά από ένα ελάχιστο μέγεθος θύρας προβολής και εφαρμόζεται αυτόματα στις μεγαλύτερες συσκευές, εκτός εάν παρακαμφθεί.
Τρεις ίσες στήλες
Αποκτήστε τρεις στήλες ίσου πλάτους ξεκινώντας από επιτραπέζιους υπολογιστές και κλιμάκωση σε μεγάλους επιτραπέζιους υπολογιστές . Σε κινητές συσκευές, tablet και παρακάτω, οι στήλες θα στοιβάζονται αυτόματα.
Τρεις ίσες στήλες εναλλακτική
Χρησιμοποιώντας τις .row-cols-*
κλάσεις, μπορείτε εύκολα να δημιουργήσετε ένα πλέγμα με ίσες στήλες.
.col
παιδί του
.row-cols-md-3
.col
παιδί του
.row-cols-md-3
.col
παιδί του
.row-cols-md-3
Τρεις άνισες στήλες
Αποκτήστε τρεις στήλες που ξεκινούν από επιτραπέζιους υπολογιστές και κλιμακώνονται σε μεγάλους επιτραπέζιους υπολογιστές διαφόρων πλάτους. Θυμηθείτε ότι οι στήλες πλέγματος πρέπει να αθροίζονται έως και δώδεκα για ένα μόνο οριζόντιο μπλοκ. Περισσότερο από αυτό, και οι στήλες αρχίζουν να στοιβάζονται ανεξάρτητα από το παράθυρο προβολής.
Δύο στήλες
Αποκτήστε δύο στήλες που ξεκινούν από επιτραπέζιους υπολογιστές και κλιμακώνονται σε μεγάλους επιτραπέζιους υπολογιστές .
Πλήρες πλάτος, μονή στήλη
Δεν απαιτούνται κατηγορίες πλέγματος για στοιχεία πλήρους πλάτους.
Δύο στήλες με δύο ένθετες στήλες
Σύμφωνα με την τεκμηρίωση, η ένθεση είναι εύκολη—απλώς τοποθετήστε μια σειρά στηλών σε μια υπάρχουσα στήλη. Αυτό σας δίνει δύο στήλες που ξεκινούν από επιτραπέζιους υπολογιστές και κλιμακώνονται σε μεγάλους επιτραπέζιους υπολογιστές , με άλλες δύο (ίσα πλάτη) εντός της μεγαλύτερης στήλης.
Σε μεγέθη φορητών συσκευών, tablet και κάτω, αυτές οι στήλες και οι ένθετες στήλες τους θα στοιβάζονται.
Μικτή: φορητή και επιφάνεια εργασίας
Το σύστημα πλέγματος Bootstrap v4 έχει πέντε επίπεδα κλάσεων: xs (εξαιρετικά μικρό, αυτό το infix κλάσης δεν χρησιμοποιείται), sm (μικρό), md (μεσαίο), lg (μεγάλο) και xl (εξαιρετικά μεγάλο). Μπορείτε να χρησιμοποιήσετε σχεδόν οποιονδήποτε συνδυασμό αυτών των κλάσεων για να δημιουργήσετε πιο δυναμικές και ευέλικτες διατάξεις.
Κάθε βαθμίδα κλάσεων κλιμακώνεται, πράγμα που σημαίνει ότι εάν σκοπεύετε να ορίσετε τα ίδια πλάτη για md, lg και xl, χρειάζεται μόνο να καθορίσετε το md.
Μικτή: κινητό, tablet και επιτραπέζιος υπολογιστής
Υδρορροές
Με .gx-*
τις κατηγορίες, οι οριζόντιες υδρορροές μπορούν να ρυθμιστούν.
.col
με
.gx-4
υδρορροές
.col
με
.gx-4
υδρορροές
.col
με
.gx-4
υδρορροές
.col
με
.gx-4
υδρορροές
.col
με
.gx-4
υδρορροές
.col
με
.gx-4
υδρορροές
Χρησιμοποιήστε τις .gy-*
τάξεις για να ελέγξετε τις κάθετες υδρορροές.
.col
με
.gy-4
υδρορροές
.col
με
.gy-4
υδρορροές
.col
με
.gy-4
υδρορροές
.col
με
.gy-4
υδρορροές
.col
με
.gy-4
υδρορροές
.col
με
.gy-4
υδρορροές
Με .g-*
τις κλάσεις, οι υδρορροές και στις δύο κατευθύνσεις μπορούν να ρυθμιστούν.
.col
με
.g-3
υδρορροές
.col
με
.g-3
υδρορροές
.col
με
.g-3
υδρορροές
.col
με
.g-3
υδρορροές
.col
με
.g-3
υδρορροές
.col
με
.g-3
υδρορροές
Εμπορευματοκιβώτια
Οι πρόσθετες κλάσεις που προστέθηκαν στο Bootstrap v4.4 επιτρέπουν κοντέινερ που έχουν πλάτος 100% μέχρι ένα συγκεκριμένο σημείο διακοπής. Το v5 προσθέτει ένα νέο xxl
σημείο διακοπής.