بوشلۇق

Bootstrap ئېلېمېنتنىڭ سىرتقى كۆرۈنۈشىنى ئۆزگەرتىش ئۈچۈن كەڭ دائىرىلىك قىسقا ئىنكاس قايتۇرۇش پەرقى ، تاختا ۋە بوشلۇقتىن پايدىلىنىش سىنىپلىرىنى ئۆز ئىچىگە ئالىدۇ.

بۇ بەتتە

Margin and padding

ئىنكاسچان دوستانە marginياكى paddingقىممەتنى ئېلېمېنت ياكى ئۇنىڭ بىر قىسمىغا قىسقا دەرسلىك بىلەن تەقسىم قىلىڭ. يەككە خۇسۇسىيەت ، بارلىق خۇسۇسىيەت ۋە تىك ۋە توغرىسىغا خاسلىقنى قوللاشنى ئۆز ئىچىگە ئالىدۇ. دەرسلەر سۈكۈتتىكى Sass خەرىتىسىدىن تارتىپ ياسالغان .25rem.3rem

CSS Grid ئورۇنلاشتۇرۇش مودۇلىنى ئىشلىتىۋاتامسىز؟ ئۇنىڭ ئورنىغا بوشلۇقنى ئىشلىتىشنى ئويلاڭ .

ئىزاھات

xsبارلىق بۆسۈش نۇقتىلىرىغا ماس كېلىدىغان بوشلۇق ئەسلىھەلىرىدە xxlئۇلاردا بۆسۈش قىسقارتىلمىسى يوق. چۈنكى ئۇ دەرسلەر يۇقىرى-تۆۋەن قوللىنىلىدۇ min-width: 0، شۇڭا تاراتقۇلارنىڭ سوئالى بىلەن باغلانمايدۇ. قالغان بۆسۈش نۇقتىلىرى بۆسۈش قىسقارتىلمىسىنى ئۆز ئىچىگە ئالىدۇ.

دەرسلەر ، ۋە ، ، ، ۋە ئۈچۈن فورماتنى ئىشلىتىپ {property}{sides}-{size}ئاتالغان .xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

مال -مۈلۈكنىڭ بىرى:

m- تەڭشەلگەن دەرسلەر ئۈچۈنmargin
p- تەڭشەلگەن دەرسلەر ئۈچۈنpadding

تەرەپلەر بولسا :

t- بەلگىلەيدىغان margin-topياكىpadding-top
b- بەلگىلەيدىغان margin-bottomياكىpadding-bottom
s- ( LTR) ياكى RTL دا margin-leftبەلگىلەنگەن دەرسلەر ئۈچۈنpadding-leftmargin-rightpadding-right
e- ( LTR) ياكى RTL دا margin-rightبەلگىلەنگەن دەرسلەر ئۈچۈنpadding-rightmargin-leftpadding-left
x*-left- ھەم ھەر ئىككىسىنى بەلگىلەيدىغان دەرسلەر ئۈچۈن*-right
y*-top- ھەم ھەر ئىككىسىنى بەلگىلەيدىغان دەرسلەر ئۈچۈن*-bottom
قۇرۇق - ئېلېمېنتنىڭ 4 تەرىپىگە marginياكى ھەممىسىنى بەلگىلەيدىغان دەرسلەر ئۈچۈنpadding

چوڭلۇقى بىر بولسا:

0margin- ياكى 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
automargin- ئاپتوماتىك تەڭشەيدىغان دەرسلەر ئۈچۈن

$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;
}

Gap

ئىشلەتكەندە ئانا تور قاچىسىدىكى ئاممىۋى ئەسلىھەلەردىن display: gridپايدىلانسىڭىز بولىدۇ . بۇ يەككە تور تۈرلىرىگە ( قاچىنىڭ gapبالىلىرى) غا قوشۇمچە ئىقتىدار قوشۇشقا تېجەپ قالالايدۇ . display: gridبوشلۇق ئەسلىھەلىرى سۈكۈتتىكى ھالەتتە ئىنكاس قايتۇرىدۇ ، $spacersSass خەرىتىسىنى ئاساس قىلىپ ، بىزنىڭ API API ئارقىلىق ھاسىل بولىدۇ.

Grid item 1

Grid item 2

Grid item 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

خەرىتە

بوشلۇق ئەسلىھەلىرى Sass خەرىتىسى ئارقىلىق ئېلان قىلىنىدۇ ، ئاندىن بىزنىڭ API لار بىلەن ھاسىل بولىدۇ.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Utilities API

بوشلۇق ئەسلىھەلىرى بىزنىڭ 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
    ),