ርሕቀት ምግባር

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

ከመይ ይሰርሕ

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

ኣሉታዊ ወሰን እዩ።

ኣብ 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 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>