ክፍተት

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

እንዴት እንደሚሰራ

ምላሽ ሰጪ-ወዳጃዊ 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>