ክፍተት

ቡትስትራፕ የአንድን ንጥረ ነገር ገጽታ ለማሻሻል ሰፊ የአጭር እጅ ምላሽ ሰጪ ህዳግ፣ ንጣፍ እና ክፍተት መገልገያ ክፍሎችን ያካትታል።

በዚህ ገጽ ላይ

ህዳግ እና ንጣፍ

ምላሽ ሰጪ-ወዳጃዊ marginወይም paddingእሴቶችን ለአጭር እጅ ክፍሎች ላሉት ንጥረ ነገር ወይም የጎኖቹ ንዑስ ስብስብ መድብ። ለግለሰብ ንብረቶች፣ ሁሉም ንብረቶች እና አቀባዊ እና አግድም ባህሪያት ድጋፍን ያካትታል። ክፍሎች የተገነቡት ከነባሪ Sass ካርታ እስከ እስከ ድረስ .25remነው 3rem።

የሲኤስኤስ ግሪድ አቀማመጥ ሞጁሉን እየተጠቀሙ ነው? በምትኩ ክፍተቱን መገልገያ መጠቀም ያስቡበት ።

ማስታወሻ

በሁሉም መግቻ ነጥቦች ላይ የሚተገበሩ የርቀት መገልገያዎች ከ 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በኤልቲአር፣ margin-rightወይም padding-rightበ RTL ውስጥ ላሉ ክፍሎች
e- (መጨረሻ) ለተዘጋጁ margin-rightወይም padding-rightበኤልቲአር፣ 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ወደ አውቶማቲክ ለሚያዘጋጁ ክፍሎች

$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የመያዣ ልጆች) ላይ የኅዳግ መገልገያዎችን ከመጨመር ይቆጥባል። የጋፕ መገልገያዎች በነባሪነት ምላሽ ይሰጣሉ፣ እና በ $spacersSass ካርታ ላይ በመመስረት በእኛ መገልገያዎች ኤፒአይ የመነጩ ናቸው።

የፍርግርግ ንጥል 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 ካርታ ይታወቃሉ ከዚያም በእኛ መገልገያዎች ኤፒአይ ይፈጠራሉ።

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

መገልገያዎች ኤፒአይ

የቦታ መጠቀሚያዎች በእኛ መገልገያዎች ኤፒአይ ውስጥ ይታወቃሉ scss/_utilities.scss። የመገልገያ ኤፒአይን እንዴት መጠቀም እንደሚችሉ ይወቁ።

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