ርሕቀት ምግባር

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

ከመይ ይሰርሕ

ንሓደ ባእታ ወይ ንኡስ ስብስብ ጎድኑ ምስ ኣቋራጭ ክፍልታት ምላሽ ዝህብ 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
• blank - ንሓደ 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- ንናይ 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>

ኣሉታዊ ወሰን እዩ።

ኣብ CSS margin፡ ንብረታት ኣሉታዊ ክብርታት ክጥቀሙ ይኽእሉ ( paddingኣይክእሉን)። ካብ 4.2 ጀሚሩ፡ ንነፍሲ ​​ወከፍ ኣብ ላዕሊ ዝተዘርዘረ ዜሮ ዘይኮነ ምሉእ ቁጽሪ (ንኣብነት፡ , , , , 1) 2ኣሉታዊ 3ወሰን ዩቲሊቲታት ወሲኽና ኣለና ። እዞም ዩቲሊቲታት ኣብ ስግር ነጥብታት ሽቦ ዓምዲ ጐዳጉዲ ንምምዕርራይ ምቹኣት እዮም።45

እቲ ስነ-ቓል ዳርጋ ምስቲ ነባሪ፣ ኣወንታዊ ወሰን ዩቲሊቲታት ሓደ እዩ፣ ግን nቅድሚ እቲ ዝተሓተተ ዓቐን ናይ ምውሳኽ። ኣብዚ ሓደ ኣብነት ክፍሊ ኣሎ ንሱ ድማ ኣንጻር ናይ .mt-1:

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

ኣብዚ ኣብነት ናይ Bootstrap grid ኣብ medium ( md) breakpointን ልዕሊኡን ምምዕርራይ ኣሎ። ንሕና ነቲ .colፓዲንግ ምስ ኣዕቢናዮ ኣለና .px-md-5ድሕሪኡ ድማ ነቲ ምስ .mx-md-n5ኣብ ልዕሊ ወላዲ ተቓዊምናዮ ኣለና .row።

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