Διάστημα

Το Bootstrap περιλαμβάνει μια μεγάλη γκάμα κλάσεων βοηθητικών περιθωρίων, padding και gap που ανταποκρίνονται σε συντομογραφία για την τροποποίηση της εμφάνισης ενός στοιχείου.

Σε αυτήν την σελίδα

Περιθώριο και επένδυση

Εκχωρήστε φιλικές προς απόκριση 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σε RTL
e- (τέλος) για κλάσεις που ορίζονται margin-rightή padding-rightσε LTR, margin-leftή padding-leftσε RTL
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;
}

.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.

Στοιχείο πλέγματος 1

Στοιχείο πλέγματος 2

Στοιχείο πλέγματος 3

html

<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,
);

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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),