Παραδείγματα πλέγματος εκκίνησης

Βασικές διατάξεις πλέγματος για να εξοικειωθείτε με την κατασκευή εντός του συστήματος πλέγματος Bootstrap.

Σε αυτά τα παραδείγματα η .themed-grid-colκλάση προστίθεται στις στήλες για να προσθέσει κάποιο θέμα. Αυτή δεν είναι μια κλάση που είναι διαθέσιμη στο Bootstrap από προεπιλογή.

Πέντε επίπεδα πλέγματος

Υπάρχουν πέντε επίπεδα στο σύστημα πλέγματος Bootstrap, ένα για κάθε σειρά συσκευών που υποστηρίζουμε. Κάθε επίπεδο ξεκινά από ένα ελάχιστο μέγεθος θύρας προβολής και εφαρμόζεται αυτόματα στις μεγαλύτερες συσκευές, εκτός εάν παρακαμφθεί.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

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

Αποκτήστε τρεις στήλες ίσου πλάτους ξεκινώντας από επιτραπέζιους υπολογιστές και κλιμάκωση σε μεγάλους επιτραπέζιους υπολογιστές . Σε κινητές συσκευές, tablet και παρακάτω, οι στήλες θα στοιβάζονται αυτόματα.

.col-md-4
.col-md-4
.col-md-4

Τρεις άνισες στήλες

Αποκτήστε τρεις στήλες που ξεκινούν από επιτραπέζιους υπολογιστές και κλιμακώνονται σε μεγάλους επιτραπέζιους υπολογιστές διαφόρων πλάτους. Θυμηθείτε ότι οι στήλες πλέγματος πρέπει να αθροίζονται έως και δώδεκα για ένα μόνο οριζόντιο μπλοκ. Περισσότερο από αυτό, και οι στήλες αρχίζουν να στοιβάζονται ανεξάρτητα από το παράθυρο προβολής.

.col-md-3
.col-md-6
.col-md-3

Δύο στήλες

Αποκτήστε δύο στήλες που ξεκινούν από επιτραπέζιους υπολογιστές και κλιμακώνονται σε μεγάλους επιτραπέζιους υπολογιστές .

.col-md-8
.col-md-4

Πλήρες πλάτος, μονή στήλη

Δεν απαιτούνται κατηγορίες πλέγματος για στοιχεία πλήρους πλάτους.

Δύο στήλες με δύο ένθετες στήλες

Σύμφωνα με την τεκμηρίωση, η ένθεση είναι εύκολη—απλώς τοποθετήστε μια σειρά στηλών σε μια υπάρχουσα στήλη. Αυτό σας δίνει δύο στήλες που ξεκινούν από επιτραπέζιους υπολογιστές και κλιμακώνονται σε μεγάλους επιτραπέζιους υπολογιστές , με άλλες δύο (ίσα πλάτη) εντός της μεγαλύτερης στήλης.

Σε μεγέθη φορητών συσκευών, tablet και κάτω, αυτές οι στήλες και οι ένθετες στήλες τους θα στοιβάζονται.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Μικτή: φορητή και επιφάνεια εργασίας

Το σύστημα πλέγματος Bootstrap v4 έχει πέντε επίπεδα κλάσεων: xs (εξαιρετικά μικρό), sm (μικρό), md (μεσαίο), lg (μεγάλο) και xl (εξαιρετικά μεγάλο). Μπορείτε να χρησιμοποιήσετε σχεδόν οποιονδήποτε συνδυασμό αυτών των κλάσεων για να δημιουργήσετε πιο δυναμικές και ευέλικτες διατάξεις.

Κάθε βαθμίδα κλάσεων κλιμακώνεται, πράγμα που σημαίνει ότι αν σκοπεύετε να ορίσετε τα ίδια πλάτη για xs και sm, χρειάζεται μόνο να καθορίσετε xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Μικτή: κινητό, tablet και επιτραπέζιος υπολογιστής

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4