Διάστημα
Το Bootstrap περιλαμβάνει μια μεγάλη γκάμα κλάσεων βοηθητικών περιθωρίων, συμπληρωμάτων και κενών που ανταποκρίνονται σε συντομογραφία για την τροποποίηση της εμφάνισης ενός στοιχείου.
Περιθώριο και επένδυση
Εκχωρήστε φιλικές προς απόκριση margin
ή padding
τιμές σε ένα στοιχείο ή ένα υποσύνολο των πλευρών του με τάξεις στενογραφίας. Περιλαμβάνει υποστήριξη για μεμονωμένες ιδιότητες, όλες τις ιδιοκτησίες και κάθετες και οριζόντιες ιδιότητες. Οι κλάσεις δημιουργούνται από έναν προεπιλεγμένο χάρτη Sass που κυμαίνεται από .25rem
έως 3rem
.
Χρησιμοποιείτε τη μονάδα διάταξης CSS Grid; Εξετάστε το ενδεχόμενο να χρησιμοποιήσετε το βοηθητικό πρόγραμμα gap .
Σημειογραφία
Τα βοηθητικά προγράμματα Spacing που ισχύουν για όλα τα σημεία διακοπής, από xs
έως xxl
, δεν έχουν συντομογραφία σημείου διακοπής. Αυτό συμβαίνει επειδή αυτές οι κλάσεις εφαρμόζονται από min-width: 0
και πάνω, και επομένως δεν δεσμεύονται από ένα ερώτημα μέσων. Τα υπόλοιπα σημεία διακοπής, ωστόσο, περιλαμβάνουν μια συντομογραφία σημείου διακοπής.
Οι κλάσεις ονομάζονται χρησιμοποιώντας τη μορφή {property}{sides}-{size}
για xs
και {property}{sides}-{breakpoint}-{size}
για sm
, md
, lg
, xl
και xxl
.
Όπου το ακίνητο είναι ένα από:
m
- για τάξεις που σετmargin
p
- για τάξεις που σετpadding
Όπου οι πλευρές είναι μία από:
t
- για τάξεις που ορίζουνmargin-top
ήpadding-top
b
- για τάξεις που ορίζουνmargin-bottom
ήpadding-bottom
s
- (έναρξη) για κλάσεις που ορίζονταιmargin-left
ήpadding-left
σε LTR,margin-right
ήpadding-right
σε RTLe
- (τέλος) για κλάσεις που ορίζονταιmargin-right
ήpadding-right
σε LTR,margin-left
ήpadding-left
σε RTLx
- για τάξεις που ορίζουν και τα δύο*-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;
}
.ms-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
δεν μπορεί). Αυτά τα αρνητικά περιθώρια είναι απενεργοποιημένα από προεπιλογή , αλλά μπορούν να ενεργοποιηθούν στο Sass με ρύθμιση $enable-negative-margins: true
.
Η σύνταξη είναι σχεδόν ίδια με τα προεπιλεγμένα βοηθητικά προγράμματα θετικού περιθωρίου, αλλά με την προσθήκη n
πριν από το ζητούμενο μέγεθος. Ακολουθεί ένα παράδειγμα κλάσης που είναι το αντίθετο από .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Χάσμα
Όταν χρησιμοποιείτε display: grid
το , μπορείτε να χρησιμοποιήσετε gap
βοηθητικά προγράμματα στο κοντέινερ γονικού δικτύου. Αυτό μπορεί να εξοικονομήσει από την ανάγκη προσθήκης βοηθητικών προγραμμάτων περιθωρίου σε μεμονωμένα στοιχεία πλέγματος (παιδιά ενός display: grid
κοντέινερ). Τα βοηθητικά προγράμματα Gap αποκρίνονται από προεπιλογή και δημιουργούνται μέσω του API των βοηθητικών μας προγραμμάτων, με βάση τον $spacers
χάρτη Sass.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Η υποστήριξη περιλαμβάνει επιλογές απόκρισης για όλα τα σημεία διακοπής πλέγματος του Bootstrap, καθώς και έξι μεγέθη από τον $spacers
χάρτη ( 0
– 5
). Δεν υπάρχει .gap-auto
κατηγορία χρησιμότητας, καθώς είναι ουσιαστικά η ίδια με την .gap-0
.
Sass
Χάρτες
Τα βοηθητικά προγράμματα Spacing δηλώνονται μέσω του χάρτη Sass και στη συνέχεια δημιουργούνται με το API των βοηθητικών μας προγραμμάτων.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
Utilities API
Τα βοηθητικά προγράμματα Spacing δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss
. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),