Διάστημα
Το Bootstrap περιλαμβάνει μια ευρεία γκάμα κλάσεων βοηθητικών περιθωρίων και συμπληρωμάτων που ανταποκρίνονται σε συντομογραφία για την τροποποίηση της εμφάνισης ενός στοιχείου.
Πως δουλεύει
Εκχωρήστε φιλικές προς απόκριση margin
ή padding
τιμές σε ένα στοιχείο ή ένα υποσύνολο των πλευρών του με τάξεις στενογραφίας. Περιλαμβάνει υποστήριξη για μεμονωμένες ιδιότητες, όλες τις ιδιοκτησίες και κάθετες και οριζόντιες ιδιότητες. Οι κλάσεις δημιουργούνται από έναν προεπιλεγμένο χάρτη Sass που κυμαίνεται από .25rem
έως 3rem
.
Σημειογραφία
Τα βοηθητικά προγράμματα Spacing που ισχύουν για όλα τα σημεία διακοπής, από xs
έως xl
, δεν έχουν συντομογραφία σημείου διακοπής. Αυτό συμβαίνει επειδή αυτές οι κλάσεις εφαρμόζονται από min-width: 0
και πάνω, και επομένως δεν δεσμεύονται από ένα ερώτημα μέσων. Τα υπόλοιπα σημεία διακοπής, ωστόσο, περιλαμβάνουν μια συντομογραφία σημείου διακοπής.
Οι κλάσεις ονομάζονται χρησιμοποιώντας τη μορφή {property}{sides}-{size}
για xs
και {property}{sides}-{breakpoint}-{size}
για sm
, md
, lg
και xl
.
Όπου το ακίνητο είναι ένα από:
m
- για τάξεις που σετmargin
p
- για τάξεις που σετpadding
Όπου οι πλευρές είναι μία από:
t
- για τάξεις που ορίζουνmargin-top
ήpadding-top
b
- για τάξεις που ορίζουνmargin-bottom
ήpadding-bottom
l
- για τάξεις που ορίζουνmargin-left
ήpadding-left
r
- για τάξεις που ορίζουνmargin-right
ήpadding-right
x
- για τάξεις που ορίζουν και τα δύο*-left
και*-right
y
- για τάξεις που ορίζουν και τα δύο*-top
και*-bottom
- κενό - για κλάσεις που ορίζουν ένα
margin
ή καιpadding
στις 4 πλευρές του στοιχείου
Όπου το μέγεθος είναι ένα από:
0
- για τάξεις που εξαλείφουν τοmargin
ήpadding
ρυθμίζοντας το σε0
1
- (από προεπιλογή) για κλάσεις που ορίζουν τοmargin
ή τοpadding
σε$spacer * .25
2
- (από προεπιλογή) για κλάσεις που ορίζουν τοmargin
ή τοpadding
σε$spacer * .5
3
- (από προεπιλογή) για κλάσεις που ορίζουν τοmargin
ή τοpadding
σε$spacer
4
- (από προεπιλογή) για κλάσεις που ορίζουν τοmargin
ή τοpadding
σε$spacer * 1.5
5
- (από προεπιλογή) για κλάσεις που ορίζουν τοmargin
ή τοpadding
σε$spacer * 3
auto
- για τάξεις που ορίζουν τοmargin
σε auto
(Μπορείτε να προσθέσετε περισσότερα μεγέθη προσθέτοντας καταχωρίσεις στη $spacers
μεταβλητή χάρτη Sass.)
Παραδείγματα
Ακολουθούν μερικά αντιπροσωπευτικά παραδείγματα αυτών των τάξεων:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Οριζόντιο κεντράρισμα
Επιπλέον, το Bootstrap περιλαμβάνει επίσης μια .mx-auto
κλάση για το οριζόντιο κεντράρισμα περιεχομένου σε επίπεδο μπλοκ σταθερού πλάτους —δηλαδή περιεχόμενο που έχει display: block
και ένα width
σύνολο— ορίζοντας τα οριζόντια περιθώρια σε auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Αρνητικό περιθώριο
Στο CSS, margin
οι ιδιότητες μπορούν να χρησιμοποιούν αρνητικές τιμές ( padding
δεν μπορεί). Από την 4.2, έχουμε προσθέσει βοηθητικά προγράμματα αρνητικού περιθωρίου για κάθε μη μηδενικό ακέραιο μέγεθος που αναφέρεται παραπάνω (π.χ., 1
, 2
, , 3
, 4
, 5
). Αυτά τα βοηθητικά προγράμματα είναι ιδανικά για την προσαρμογή των υδρορροών στηλών πλέγματος σε σημεία διακοπής.
Η σύνταξη είναι σχεδόν ίδια με τα προεπιλεγμένα βοηθητικά προγράμματα θετικού περιθωρίου, αλλά με την προσθήκη n
πριν από το ζητούμενο μέγεθος. Ακολουθεί ένα παράδειγμα κλάσης που είναι το αντίθετο από .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
md
Ακολουθεί ένα παράδειγμα προσαρμογής του πλέγματος Bootstrap στο σημείο διακοπής μέσου ( ) και άνω. Αυξήσαμε το .col
padding με .px-md-5
και, στη συνέχεια, το αντιμετωπίσαμε με .mx-md-n5
το γονικό .row
.
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>