Σύστημα πλέγματος
Χρησιμοποιήστε το πανίσχυρο πλέγμα flexbox του mobile-first για να δημιουργήσετε διατάξεις όλων των σχημάτων και μεγεθών χάρη σε ένα σύστημα δώδεκα στηλών, πέντε προεπιλεγμένα αποκρινόμενα επίπεδα, μεταβλητές Sass και mixins και δεκάδες προκαθορισμένες κλάσεις.
Πως δουλεύει
Το σύστημα πλέγματος του Bootstrap χρησιμοποιεί μια σειρά από κοντέινερ, σειρές και στήλες για τη διάταξη και τη στοίχιση περιεχομένου. Είναι κατασκευασμένο με flexbox και έχει πλήρη απόκριση. Ακολουθεί ένα παράδειγμα και μια εις βάθος ματιά στο πώς συνδυάζεται το πλέγμα.
Νέος ή μη εξοικειωμένος με το flexbox; Διαβάστε αυτόν τον οδηγό flexbox CSS Tricks για φόντο, ορολογία, οδηγίες και αποσπάσματα κώδικα.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Το παραπάνω παράδειγμα δημιουργεί τρεις στήλες ίσου πλάτους σε μικρές, μεσαίες, μεγάλες και πολύ μεγάλες συσκευές χρησιμοποιώντας τις προκαθορισμένες κατηγορίες πλέγματος μας. Αυτές οι στήλες είναι κεντραρισμένες στη σελίδα με το γονικό .container
.
Αναλύοντας το, δείτε πώς λειτουργεί:
- Τα κοντέινερ παρέχουν ένα μέσο για να κεντράρετε και να τοποθετήσετε οριζόντια τα περιεχόμενα του ιστότοπού σας. Χρησιμοποιήστε
.container
το για εύρος pixel με απόκριση ή.container-fluid
γιαwidth: 100%
όλα τα μεγέθη θυρών προβολής και συσκευών. - Οι σειρές είναι περιτυλίγματα για στήλες. Κάθε στήλη έχει οριζόντια
padding
(που ονομάζεται υδρορροή) για τον έλεγχο του χώρου μεταξύ τους. Αυτόpadding
στη συνέχεια αντισταθμίζεται στις σειρές με αρνητικά περιθώρια. Με αυτόν τον τρόπο, όλο το περιεχόμενο στις στήλες σας ευθυγραμμίζεται οπτικά προς τα κάτω στην αριστερή πλευρά. - Σε μια διάταξη πλέγματος, το περιεχόμενο πρέπει να τοποθετείται μέσα σε στήλες και μόνο οι στήλες μπορούν να είναι αμέσως παιδιά των σειρών.
- Χάρη στο flexbox, οι στήλες πλέγματος χωρίς καθορισμένο
width
θα τοποθετηθούν αυτόματα ως στήλες ίσου πλάτους. Για παράδειγμα, τέσσερις περιπτώσεις.col-sm
θα έχουν αυτόματα πλάτος 25% από το μικρό σημείο διακοπής και πάνω. Δείτε την ενότητα στηλών αυτόματης διάταξης για περισσότερα παραδείγματα. - Οι κατηγορίες στηλών υποδεικνύουν τον αριθμό των στηλών που θέλετε να χρησιμοποιήσετε από τις πιθανές 12 ανά σειρά. Επομένως, εάν θέλετε τρεις στήλες ίσου πλάτους, μπορείτε να χρησιμοποιήσετε το
.col-4
. - Οι στήλες
width
s ορίζονται σε ποσοστά, επομένως είναι πάντα ρευστά και έχουν μέγεθος σε σχέση με το μητρικό τους στοιχείο. - Οι στήλες έχουν οριζόντια
padding
για τη δημιουργία των υδρορροών μεταξύ μεμονωμένων στηλών, ωστόσο, μπορείτε να αφαιρέσετε τοmargin
από τις σειρές καιpadding
από τις στήλες με.no-gutters
το.row
. - Για να ανταποκρίνεται το πλέγμα, υπάρχουν πέντε σημεία διακοπής πλέγματος, ένα για κάθε σημείο διακοπής απόκρισης : όλα τα σημεία διακοπής (εξαιρετικά μικρά), μικρά, μεσαία, μεγάλα και εξαιρετικά μεγάλα.
- Τα σημεία διακοπής πλέγματος βασίζονται σε ερωτήματα μέσων ελάχιστου πλάτους, που σημαίνει ότι ισχύουν σε αυτό το ένα σημείο διακοπής και σε όλα αυτά που βρίσκονται πάνω από αυτό (π.χ.
.col-sm-4
ισχύει για μικρές, μεσαίες, μεγάλες και πολύ μεγάλες συσκευές, αλλά όχι για το πρώτοxs
σημείο διακοπής). - Μπορείτε να χρησιμοποιήσετε προκαθορισμένες κλάσεις πλέγματος (όπως
.col-4
) ή μίξεις Sass για πιο σημασιολογική σήμανση.
Λάβετε υπόψη τους περιορισμούς και τα σφάλματα γύρω από το flexbox , όπως η αδυναμία χρήσης ορισμένων στοιχείων HTML ως flex κοντέινερ .
Επιλογές πλέγματος
Ενώ το Bootstrap χρησιμοποιεί em
s ή rem
s για τον καθορισμό των περισσότερων μεγεθών, px
τα s χρησιμοποιούνται για σημεία διακοπής πλέγματος και πλάτη κοντέινερ. Αυτό συμβαίνει επειδή το πλάτος της θύρας προβολής είναι σε pixel και δεν αλλάζει ανάλογα με το μέγεθος της γραμματοσειράς .
Δείτε πώς λειτουργούν πτυχές του συστήματος πλέγματος Bootstrap σε πολλές συσκευές με ένα εύχρηστο τραπέζι.
Εξαιρετικά μικρό <576 px |
Μικρό ≥576 px |
Μεσαίο ≥768 px |
Μεγάλο ≥992 px |
Εξαιρετικά μεγάλο ≥1200 px |
|
---|---|---|---|---|---|
Μέγιστο πλάτος δοχείου | Κανένα (αυτόματο) | 540 εικονοστοιχεία | 720 εικονοστοιχεία | 960 εικονοστοιχεία | 1140 εικονοστοιχεία |
Πρόθεμα τάξης | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# στηλών | 12 | ||||
Πλάτος υδρορροής | 30 εικονοστοιχεία (15 εικονοστοιχεία σε κάθε πλευρά μιας στήλης) | ||||
Φωλιασμένος | Ναί | ||||
Παραγγελία στηλών | Ναί |
Αυτόματη διάταξη στηλών
Χρησιμοποιήστε κατηγορίες στηλών για συγκεκριμένα σημεία διακοπής για εύκολο προσδιορισμό μεγέθους στηλών χωρίς ρητή αριθμημένη κλάση όπως .col-sm-6
.
Ίσο πλάτος
Για παράδειγμα, εδώ είναι δύο διατάξεις πλέγματος που εφαρμόζονται σε κάθε συσκευή και θύρα προβολής, από xs
έως xl
. Προσθέστε οποιονδήποτε αριθμό κλάσεων χωρίς μονάδες για κάθε σημείο διακοπής που χρειάζεστε και κάθε στήλη θα έχει το ίδιο πλάτος.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Πολλαπλή γραμμή ίσου πλάτους
Δημιουργήστε στήλες ίσου πλάτους που εκτείνονται σε πολλές γραμμές, εισάγοντας ένα .w-100
σημείο όπου θέλετε οι στήλες να σπάσουν σε μια νέα γραμμή. Κάντε τα διαλείμματα να ανταποκρίνονται αναμειγνύοντας .w-100
με ορισμένα βοηθητικά προγράμματα προβολής με απόκριση .
Υπήρχε ένα σφάλμα Safari flexbox που εμπόδισε αυτό να λειτουργήσει χωρίς ρητή flex-basis
ή border
. Υπάρχουν λύσεις για παλαιότερες εκδόσεις του προγράμματος περιήγησης, αλλά δεν θα πρέπει να είναι απαραίτητες εάν τα προγράμματα περιήγησης-στόχου σας δεν εμπίπτουν στις εκδόσεις με σφάλματα.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Ρύθμιση ενός πλάτους στήλης
Η αυτόματη διάταξη για στήλες πλέγματος flexbox σημαίνει επίσης ότι μπορείτε να ορίσετε το πλάτος μιας στήλης και να αλλάξετε το μέγεθος των αδελφών στηλών αυτόματα γύρω της. Μπορείτε να χρησιμοποιήσετε προκαθορισμένες κατηγορίες πλέγματος (όπως φαίνεται παρακάτω), μίξεις πλέγματος ή ενσωματωμένα πλάτη. Σημειώστε ότι το μέγεθος των άλλων στηλών θα αλλάξει ανεξάρτητα από το πλάτος της κεντρικής στήλης.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Περιεχόμενο μεταβλητού πλάτους
Χρησιμοποιήστε col-{breakpoint}-auto
κλάσεις για το μέγεθος των στηλών με βάση το φυσικό πλάτος του περιεχομένου τους.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Ανταποκρινόμενες τάξεις
Το πλέγμα του Bootstrap περιλαμβάνει πέντε επίπεδα προκαθορισμένων κλάσεων για τη δημιουργία σύνθετων διατάξεων με απόκριση. Προσαρμόστε το μέγεθος των στηλών σας σε πολύ μικρές, μικρές, μεσαίες, μεγάλες ή πολύ μεγάλες συσκευές όπως εσείς κρίνετε κατάλληλο.
Όλα τα σημεία διακοπής
Για πλέγματα που είναι ίδια από τη μικρότερη συσκευή έως τη μεγαλύτερη, χρησιμοποιήστε τις κλάσεις .col
και . .col-*
Καθορίστε μια αριθμημένη κλάση όταν χρειάζεστε μια στήλη ειδικού μεγέθους. Διαφορετικά, μη διστάσετε να εμμείνετε στο .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Στοιβάζονται σε οριζόντια
Χρησιμοποιώντας ένα ενιαίο σύνολο .col-sm-*
κλάσεων, μπορείτε να δημιουργήσετε ένα βασικό σύστημα πλέγματος που ξεκινάει στοιβαγμένο και γίνεται οριζόντιο στο μικρό σημείο διακοπής ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Ανακατεψε και ταιριαξε
Δεν θέλετε οι στήλες σας απλώς να στοιβάζονται σε ορισμένες βαθμίδες πλέγματος; Χρησιμοποιήστε έναν συνδυασμό διαφορετικών κλάσεων για κάθε επίπεδο, όπως απαιτείται. Δείτε το παρακάτω παράδειγμα για μια καλύτερη ιδέα για το πώς λειτουργούν όλα.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Υδρορροές
Οι υδρορροές μπορούν να ρυθμιστούν με απόκριση με ειδικές κατηγορίες γεμισμάτων και αρνητικών περιθωρίων. Για να αλλάξετε τις υδρορροές σε μια δεδομένη σειρά, συνδυάστε ένα βοηθητικό πρόγραμμα αρνητικού περιθωρίου στο .row
και τα αντίστοιχα βοηθητικά προγράμματα πλήρωσης στο .col
s. Το .container
ή ο .container-fluid
γονέας μπορεί να χρειαστεί επίσης προσαρμογή για να αποφευχθεί η ανεπιθύμητη υπερχείλιση, χρησιμοποιώντας ξανά το βοηθητικό πρόγραμμα ταιριάσματος padding.
Ακολουθεί ένα παράδειγμα προσαρμογής του πλέγματος Bootstrap στο μεγάλο σημείο lg
διακοπής ( ) και πάνω. Αυξήσαμε το .col
γέμισμα με το .px-lg-5
, το εξουδετερώσαμε με .mx-lg-n5
το γονικό .row
και, στη συνέχεια, προσαρμόσαμε το .container
περιτύλιγμα με .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Στήλες σειρών
Χρησιμοποιήστε τις αποκριτικές .row-cols-*
κλάσεις για να ορίσετε γρήγορα τον αριθμό των στηλών που αποδίδουν καλύτερα το περιεχόμενο και τη διάταξή σας. Ενώ οι κανονικές .col-*
κλάσεις ισχύουν για τις μεμονωμένες στήλες (π.χ. .col-md-4
), οι τάξεις στηλών γραμμής ορίζονται στο γονικό .row
ως συντόμευση.
Χρησιμοποιήστε αυτές τις τάξεις στηλών σειρών για να δημιουργήσετε γρήγορα βασικές διατάξεις πλέγματος ή για να ελέγξετε τις διατάξεις των καρτών σας.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Μπορείτε επίσης να χρησιμοποιήσετε το συνοδευτικό Sass mixin, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Ευθυγραμμία
Χρησιμοποιήστε βοηθητικά προγράμματα ευθυγράμμισης flexbox για κάθετη και οριζόντια στοίχιση στηλών. Ο Internet Explorer 10-11 δεν υποστηρίζει την κατακόρυφη στοίχιση ευέλικτων στοιχείων όταν το flex κοντέινερ έχει ένα min-height
όπως φαίνεται παρακάτω. Δείτε το Flexbugs #3 για περισσότερες λεπτομέρειες.
Κατακόρυφη στοίχιση
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Οριζόντια ευθυγράμμιση
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Χωρίς υδρορροές
Οι υδρορροές μεταξύ στηλών στις προκαθορισμένες κατηγορίες πλέγματος μπορούν να αφαιρεθούν με .no-gutters
. Αυτό αφαιρεί το αρνητικό margin
s από .row
και το οριζόντιο padding
από όλες τις στήλες των άμεσων παιδιών.
Εδώ είναι ο πηγαίος κώδικας για τη δημιουργία αυτών των στυλ. Λάβετε υπόψη ότι οι παρακάμψεις στηλών καλύπτονται μόνο από τις πρώτες θυγατρικές στήλες και στοχεύονται μέσω του επιλογέα χαρακτηριστικών . Ενώ αυτό δημιουργεί έναν πιο συγκεκριμένο επιλογέα, η συμπλήρωση στηλών μπορεί ακόμα να προσαρμοστεί περαιτέρω με βοηθητικά προγράμματα διαστήματος .
Χρειάζεστε σχέδιο από άκρη σε άκρη; Ρίξτε τον γονέα .container
ή .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Στην πράξη, εδώ είναι πώς φαίνεται. Σημειώστε ότι μπορείτε να συνεχίσετε να το χρησιμοποιείτε με όλες τις άλλες προκαθορισμένες κατηγορίες πλέγματος (συμπεριλαμβανομένων των πλατών στηλών, των αποκρινόμενων επιπέδων, των αναπαραγγελιών και άλλων).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Περιτύλιγμα στήλης
Εάν τοποθετηθούν περισσότερες από 12 στήλες σε μία μόνο γραμμή, κάθε ομάδα επιπλέον στηλών θα αναδιπλωθεί, ως μία μονάδα, σε μια νέα γραμμή.
Από 9 + 4 = 13 > 12, αυτό το πλάτος τεσσάρων στηλών div τυλίγεται σε μια νέα γραμμή ως μία συνεχόμενη μονάδα.
Οι επόμενες στήλες συνεχίζονται κατά μήκος της νέας γραμμής.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Σπάει η στήλη
Η αλλαγή στηλών σε μια νέα γραμμή στο flexbox απαιτεί ένα μικρό hack: προσθέστε ένα στοιχείο με width: 100%
όπου θέλετε να τυλίξετε τις στήλες σας σε μια νέα γραμμή. Κανονικά αυτό επιτυγχάνεται με πολλαπλά .row
s, αλλά δεν μπορεί να το εξηγήσει κάθε μέθοδος υλοποίησης.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Μπορείτε επίσης να εφαρμόσετε αυτό το διάλειμμα σε συγκεκριμένα σημεία διακοπής με τα βοηθητικά προγράμματα προβολής που αποκρίνονται .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Αναπαραγγελία
Παραγγελία μαθημάτων
Χρησιμοποιήστε .order-
μαθήματα για τον έλεγχο της οπτικής σειράς του περιεχομένου σας. Αυτές οι κλάσεις αποκρίνονται, επομένως μπορείτε να ορίσετε το order
σημείο διακοπής (π.χ., .order-1.order-md-2
). Περιλαμβάνει υποστήριξη 1
μέσω 12
και στα πέντε επίπεδα πλέγματος.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Υπάρχουν επίσης responsive .order-first
και .order-last
κλάσεις που αλλάζουν το order
στοιχείο ενός στοιχείου εφαρμόζοντας order: -1
και order: 13
( order: $columns + 1
), αντίστοιχα. Αυτές οι κλάσεις μπορούν επίσης να αναμειχθούν με τις αριθμημένες .order-*
κλάσεις όπως απαιτείται.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Μετατόπιση στηλών
Μπορείτε να αντισταθμίσετε τις στήλες πλέγματος με δύο τρόπους: τις αποκριτικές .offset-
κατηγορίες πλέγματος και τα βοηθητικά προγράμματα περιθωρίου . Οι κλάσεις πλέγματος έχουν μέγεθος ώστε να ταιριάζουν με στήλες, ενώ τα περιθώρια είναι πιο χρήσιμα για γρήγορες διατάξεις όπου το πλάτος της μετατόπισης είναι μεταβλητό.
Τάξεις όφσετ
Μετακινήστε τις στήλες προς τα δεξιά χρησιμοποιώντας .offset-md-*
κλάσεις. Αυτές οι κλάσεις αυξάνουν το αριστερό περιθώριο μιας στήλης κατά *
στήλες. Για παράδειγμα, .offset-md-4
μετακινείται .col-md-4
σε τέσσερις στήλες.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Εκτός από την εκκαθάριση στηλών σε σημεία διακοπής απόκρισης, μπορεί να χρειαστεί να επαναφέρετε τις μετατοπίσεις. Δείτε το σε δράση στο παράδειγμα πλέγματος .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Βοηθητικά προγράμματα περιθωρίου
Με τη μετάβαση στο flexbox στο v4, μπορείτε να χρησιμοποιήσετε βοηθητικά προγράμματα περιθωρίου όπως .mr-auto
να εξαναγκάσετε τις αδελφικές στήλες να απομακρυνθούν η μία από την άλλη.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Φωλιάζοντας
Για να ενσωματώσετε το περιεχόμενό σας με το προεπιλεγμένο πλέγμα, προσθέστε ένα νέο .row
και σύνολο .col-sm-*
στηλών σε μια υπάρχουσα .col-sm-*
στήλη. Οι ένθετες σειρές πρέπει να περιλαμβάνουν ένα σύνολο στηλών που αθροίζονται έως 12 ή λιγότερες (δεν απαιτείται να χρησιμοποιήσετε και τις 12 διαθέσιμες στήλες).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass mixins
Όταν χρησιμοποιείτε τα πηγαία αρχεία Sass του Bootstrap, έχετε την επιλογή να χρησιμοποιήσετε μεταβλητές Sass και mixins για να δημιουργήσετε προσαρμοσμένες, σημασιολογικές και αποκριτικές διατάξεις σελίδας. Οι προκαθορισμένες κατηγορίες πλέγματος μας χρησιμοποιούν αυτές τις ίδιες μεταβλητές και μίξεις για να παρέχουν μια ολόκληρη σουίτα έτοιμων προς χρήση κλάσεων για γρήγορη απόκριση διατάξεων.
Μεταβλητές
Οι μεταβλητές και οι χάρτες καθορίζουν τον αριθμό των στηλών, το πλάτος της υδρορροής και το σημείο ερωτήματος μέσων από το οποίο θα ξεκινήσουν οι αιωρούμενες στήλες. Τα χρησιμοποιούμε για να δημιουργήσουμε τις προκαθορισμένες κατηγορίες πλέγματος που τεκμηριώνονται παραπάνω, καθώς και για τις προσαρμοσμένες μίξεις που αναφέρονται παρακάτω.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Μίξεις
Οι μίξεις χρησιμοποιούνται σε συνδυασμό με τις μεταβλητές πλέγματος για τη δημιουργία σημασιολογικού CSS για μεμονωμένες στήλες πλέγματος.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Παράδειγμα χρήσης
Μπορείτε να τροποποιήσετε τις μεταβλητές στις δικές σας προσαρμοσμένες τιμές ή απλώς να χρησιμοποιήσετε τις μίξεις με τις προεπιλεγμένες τιμές τους. Ακολουθεί ένα παράδειγμα χρήσης των προεπιλεγμένων ρυθμίσεων για τη δημιουργία διάταξης δύο στηλών με κενό μεταξύ τους.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Προσαρμογή του πλέγματος
Χρησιμοποιώντας τις ενσωματωμένες μεταβλητές Sass πλέγματος και τους χάρτες μας, είναι δυνατό να προσαρμόσετε πλήρως τις προκαθορισμένες κατηγορίες πλέγματος. Αλλάξτε τον αριθμό των επιπέδων, τις διαστάσεις του ερωτήματος πολυμέσων και τα πλάτη του κοντέινερ — στη συνέχεια κάντε εκ νέου μεταγλώττιση.
Στήλες και υδρορροές
Ο αριθμός των στηλών πλέγματος μπορεί να τροποποιηθεί μέσω μεταβλητών Sass. $grid-columns
χρησιμοποιείται για να δημιουργήσει τα πλάτη (σε ποσοστά) κάθε μεμονωμένης στήλης ενώ $grid-gutter-width
ορίζει το πλάτος για τις υδρορροές στηλών.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Επίπεδα πλέγματος
Προχωρώντας πέρα από τις ίδιες τις στήλες, μπορείτε επίσης να προσαρμόσετε τον αριθμό των επιπέδων πλέγματος. Εάν θέλατε μόνο τέσσερις βαθμίδες πλέγματος, θα ενημερώσατε το $grid-breakpoints
και $container-max-widths
σε κάτι σαν αυτό:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Όταν κάνετε οποιεσδήποτε αλλαγές στις μεταβλητές ή τους χάρτες Sass, θα πρέπει να αποθηκεύσετε τις αλλαγές σας και να κάνετε εκ νέου μεταγλώττιση. Με αυτόν τον τρόπο θα βγει ένα ολοκαίνουργιο σύνολο προκαθορισμένων κατηγοριών πλέγματος για πλάτη στηλών, μετατοπίσεις και παραγγελία. Τα αποκριτικά βοηθητικά προγράμματα ορατότητας θα ενημερωθούν επίσης για να χρησιμοποιούν τα προσαρμοσμένα σημεία διακοπής. Βεβαιωθείτε ότι έχετε ορίσει τιμές πλέγματος στο px
(όχι rem
, em
, ή %
).