Source

Διάστημα

Το 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>