ርሕቀት ምግባር

ቡትስትራፕ ንመልክዕ ሓደ ባእታ ንምቕያር ሰፊሕ ዝርዝር ናይ ኣቋራጭ ምላሽ ዝህብ ወሰንን ፓዲንግ ዩቲሊቲ ክፍልታትን የጠቓልል።

ከመይ ይሰርሕ

ንሓደ ባእታ ወይ ንኡስ ስብስብ ጎድኑ ምስ ኣቋራጭ ክፍልታት ምላሽ ዝህብ marginወይ ክብርታት ምምዳብ። paddingንውልቃዊ ንብረታት፣ ንኹሎም ንብረታት፣ ከምኡ’ውን ንቐጥታውን ኣግማድን ንብረታት ዝግበር ደገፍ የጠቓልል። ክፍልታት ካብ ነባሪ ሳስ ካርታ ካብ .25remክሳብ 3rem.

ምልክት ምግባር

ንኹሎም ነጥብታት ምብታኽ ዝምልከቱ ናይ ርሕቀት መገልገሊታት፣ ካብ xsክሳብ xl፣ ኣብኦም ዝኾነ ናይ ምብታኽ ምሕጻር የብሎምን። min-width: 0እዚ ዝኾነሉ ምኽንያት ድማ እቶም ክፍልታት ካብን ላዕልን ዝትግበሩ ስለዝኾኑ ፡ በዚ ኸኣ ብናይ ሚድያ ሕቶ ስለዘይቅየዱ እዩ። እቶም ዝተረፉ ነጥብታት ምብታኽ ግን፡ ምሕጻር ነጥቢ ምብታኽ ዘጠቓልሉ እዮም።

{property}{sides}-{size}እቶም ክፍልታት ን , , , ከምኡ ’ ውን xsቅርጺ ተጠቒሞም እዮም ተሰይሞም ።{property}{sides}-{breakpoint}-{size}smmdlgxl

ንብረት ሓደ ካብ ዝኾነሉ ፤

• 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 ጎድኒ ናይቲ ባእታ ዘቐምጡ ክፍልታት

ዓቐን ሓደ ካብ ዝኾነሉ ፤

• 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
• auto- ንናይ marginto auto ዘቐምጡ ክፍልታት

$spacers(ኣብቲ ናይ ሳስ ካርታ ተለዋዋጢ ኣታዊታት ብምውሳኽ ተወሳኺ ዓቐናት ክትውስኽ ትኽእል ኢኻ ።)

ኣብነታት

ገለ ውክልና ዘለዎም ኣብነታት ናይዞም ክፍልታት እነሆ፤

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

ልኡል ማእከል ምግባር

ብተወሳኺ፡ ቡትስትራፕ ንኣግማድ-ስፍሓት ደረጃ ብሎክ ትሕዝቶ ብኣግማድ ማእከል ንምግባር ዝሕግዝ ክፍሊ እውን የጠቓልል -ማለት ፡ ዘለዎ .mx-autoትሕዝቶን ስብስብን-ነቶም ኣግማድ ወሰን ናብ .display: blockwidthauto

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>