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

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

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

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

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

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

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

.col-md-4

Τρεις ίσες στήλες εναλλακτική

Χρησιμοποιώντας τις .row-cols-*κλάσεις, μπορείτε εύκολα να δημιουργήσετε ένα πλέγμα με ίσες στήλες.

.colπαιδί του .row-cols-md-3

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

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

.col-md-3

.col-md-6

.col-md-3

Δύο στήλες

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

.col-md-8

.col-md-4

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

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

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

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

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

.col-md-8

.col-md-6

.col-md-4

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

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

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

.col-md-8

.col-6 .col-md-4

.col-6

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

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

Υδρορροές

Με .gx-*τις κατηγορίες, οι οριζόντιες υδρορροές μπορούν να ρυθμιστούν.

.colμε .gx-4υδρορροές

Χρησιμοποιήστε τις .gy-*τάξεις για να ελέγξετε τις κάθετες υδρορροές.

.colμε .gy-4υδρορροές

Με .g-*τις κλάσεις, οι υδρορροές και στις δύο κατευθύνσεις μπορούν να ρυθμιστούν.

.colμε .g-3υδρορροές

Εμπορευματοκιβώτια

Οι πρόσθετες κλάσεις που προστέθηκαν στο Bootstrap v4.4 επιτρέπουν κοντέινερ που έχουν πλάτος 100% μέχρι ένα συγκεκριμένο σημείο διακοπής. Το v5 προσθέτει ένα νέο xxlσημείο διακοπής.

.δοχείο

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.δοχείο-ρευστό