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

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

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

Αποκτήστε τρεις στήλες ίσου πλάτους ξεκινώντας από επιτραπέζιους υπολογιστές και κλιμάκωση σε μεγάλους επιτραπέζιους υπολογιστές . Σε κινητές συσκευές, 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 3 έχει τέσσερις βαθμίδες κλάσεων: xs (τηλέφωνα), sm (tablet), md (επιτραπέζιοι υπολογιστές) και lg (μεγαλύτεροι επιτραπέζιοι υπολογιστές). Μπορείτε να χρησιμοποιήσετε σχεδόν οποιονδήποτε συνδυασμό αυτών των κλάσεων για να δημιουργήσετε πιο δυναμικές και ευέλικτες διατάξεις.

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

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

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

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

Εκκαθάριση στήλης

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

.col-xs-6 .col-sm-3
Αλλάξτε το μέγεθος της θύρας προβολής ή ελέγξτε το στο τηλέφωνό σας για παράδειγμα.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Επαναφέρεται η μετατόπιση, η ώθηση και η έλξη

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

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0