ክፍተት

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

እንዴት እንደሚሰራ

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

ማስታወሻ

በሁሉም መግቻ ነጥቦች ላይ የሚተገበሩ የርቀት መገልገያዎች ከ 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ወደ አውቶማቲክ ለሚያዘጋጁ ክፍሎች

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

አሉታዊ ህዳግ

በCSS ውስጥ marginንብረቶች አሉታዊ እሴቶችን ሊጠቀሙ ይችላሉ ( paddingአይቻልም)። ከ 4.2 ጀምሮ ፣ ከላይ ለተዘረዘሩት ዜሮ ያልሆኑ የኢንቲጀር መጠኖች ሁሉ አሉታዊ የኅዳግ መገልገያዎችን አክለናል ( ለምሳሌ 1፣ እነዚህ መገልገያዎች በተቆራረጡ ነጥቦች ላይ የፍርግርግ አምዶችን ለማበጀት ተስማሚ ናቸው።2345

አገባቡ ከነባሪው፣ አወንታዊ የኅዳግ መገልገያዎች ጋር ተመሳሳይ ነው፣ ነገር ግን nከተጠየቀው መጠን በፊት ሲጨመር። .mt-1ከዚህ ተቃራኒ የሆነ ክፍል ምሳሌ ይኸውና

.mt-n1 {
  margin-top: -0.25rem !important;
}

mdበመካከለኛው ( ) መግቻ ነጥብ እና ከዚያ በላይ ያለውን የቡትስትራፕ ፍርግርግ የማበጀት ምሳሌ እዚህ አለ ። .colመከለያውን ከጨመርን በኋላ .px-md-5ያንን .mx-md-n5በወላጅ ተቃወምነው .row።

ብጁ አምድ ንጣፍ

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>