in English

ዓምድታት

ሳላ ፍሌክስቦክስ ግሪድ ስርዓትና ንኣሰላልፋ፣ ምእዛዝን ምትዕርራይን ብኣጻብዕ ዝቑጸሩ ኣማራጺታት ዓምድታት ከመይ ጌርካ ከም እትቕይሮም ተማሃር። ተወሳኺ፡ ስፍሓት ናይ ዘይሽቦ ባእታታት ንምምሕዳር ከመይ ጌርካ ናይ ዓምዲ ክፍልታት ትጥቀም ርአ።

ኣብዚ ገጽ

ርእሲ ንላዕሊ! ቅድሚ ናብ ከመይ ጌርካ ዓምድታት ሽቦኻ ትቕይሮን ትመዓራረዮን ምጥላቕካ መጀመርታ ነቲ ናይ ሽቦ ገጽ ምንባብካ ኣረጋግጽ ።

ከመይ ይሰርሑ

ዓምድታት ኣብ ልዕሊ ናይቲ ሽቦ ፍሌክስቦክስ ስነ ህንጻ ይሃንጹ። ፍሌክስቦክስ ማለት ንውልቀ ዓምድታት ንምቕያርን ንጉጅለታት ዓምድታት ብደረጃ መስርዕ ንምቕያርን ኣማራጺታት ኣለዉና ማለት ’ ዩ ። ዓምድታት ብኸመይ ከም ዝዓብዩ፡ ከም ዝንእሱ ወይ ብኻልእ መገዲ ከም ዝቕየሩ ትመርጽ።
ኣቀማምጣ ሽቦ ኣብ እትሃንጸሉ እዋን፡ ኩሉ ትሕዝቶ ብዓምድታት ይኸይድ። ስርዓተ-መሰረት ናይ ቡትስትራፕ ሽቦ ካብ መትሓዚ ናብ መስርዕ ናብ ዓምዲ ናብ ትሕዝቶኻ ይኸይድ። ኣብ ሳሕቲ ኣጋጣሚታት፡ ትሕዝቶን ዓምድን ከተዋሃህድ ትኽእል ኢኻ፡ ግን ዘይተደልየ ሳዕቤን ክህሉ ከም ዝኽእል ኣስተውዕል።
ቡትስትራፕ ቅልጡፍን ምላሽ ዝህብን ኣቀማምጣ ንምፍጣር ኣቐዲሞም ዝተነጸሩ ክፍልታት የጠቓልል። ኣብ ነፍሲ ወከፍ ደረጃ ሽቦ ሽዱሽተ ነጥብታት ምብታኽን ደርዘን ዓምድታትን ብምሓዝ፡ ዝደለኻዮ ኣቀማምጣ ንምፍጣር ድሮ ዓሰርተታት ክፍልታት ተሃኒጾም ኣለዉ። እዚ እንተደሊኻ ብመንገዲ Sass ክትዓጽዎ ትኽእል ኢኻ።

ኣሰላልፋ

ዓምድታት ብቐጥታን ብኣግማድን ንምስላፍ flexbox alignment utilities ተጠቐም።

ቀጥታዊ ኣሰላልፋ

ሓደ ካብ ሰለስተ ዓምድታት

html ዝብል ጽሑፍ ኣሎ።

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

ሓደ ካብ ሰለስተ ዓምድታት

html ዝብል ጽሑፍ ኣሎ።

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

ልኡል ኣሰላልፋ

ሓደ ካብ ክልተ ዓምድታት

html ዝብል ጽሑፍ ኣሎ።

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ዓምዲ ምጥቕላል

ልዕሊ 12 ዓምድታት ኣብ ውሽጢ ሓደ መስርዕ እንተተቐሚጦም፡ ነፍሲ ወከፍ ጉጅለ ተወሳኺ ዓምድታት፡ ከም ሓደ ኣሃዱ፡ ኣብ ሓድሽ መስመር ክጠቕልል እዩ።

.ኮል-9

.col-4
9 + 4 = 13 > 12 ስለ ዝኾነ፡ እዚ 4-ዓምዲ-ስፍሓት ዘለዎ div ከም ሓደ ተተሓሒዙ ኣብ ሓድሽ መስመር ይጥቕለል።

.col-6 ስዒቦም
ዝመጹ ዓምድታት በቲ ሓድሽ መስመር ይቕጽሉ።

html ዝብል ጽሑፍ ኣሎ።

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

ዓምዲ ይስበር

ኣብ flexbox ዓምድታት ናብ ሓድሽ መስመር ምብታኽ ንእሽቶ ሃክ ይሓትት: ዓምድታትካ ናብ ሓድሽ መስመር ክትጠቕልሎም ኣብ width: 100%እትደልዮ ቦታ ዘለዎ ባእታ ምውሳኽ። ንቡር እዚ ብብዙሕ .rows ይፍጸም፣ ግን ኩሉ ኣገባብ ኣተገባብራ ነዚ ክሕተት ኣይክእልን እዩ።

.ኮል-6 .ኮል-ስም-3

html ዝብል ጽሑፍ ኣሎ።

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

ነዚ ዕረፍቲ ኣብ ፍሉይ ናይ ምብታኽ ነጥብታት ምስቲ ምላሽ ዝህቡ ናይ ምርኢት መገልገሊታትና ’ ውን ክትትግብርዎ ትኽእሉ ኢኹም ።

.ኮል-6 .ኮል-ስም-4

html ዝብል ጽሑፍ ኣሎ።

<div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

ዳግማይ ምድላው

ክፍልታት ኣዘዙ

ንስእላዊ ቅደም ተኸተል ትሕዝቶኻ .order-ንምቁጽጻር ክፍልታት ተጠቐም ። እዞም ክፍልታት ምላሽ ዝህቡ እዮም፣ ስለዚ ነቲ ብ breakpoint (ንኣብነት፣ ) ከተቐምጦ ትኽእል ኢኻ ። ኣብ ስግር ኩሎም ሽዱሽተ ደረጃታት ሽቦ ንዝግበር ደገፍ የጠቓልል ።order.order-1.order-md-215

ቀዳማይ ኣብ ዶም ዝኾነ ትእዛዝ ኣይተተግበረን።

ካልኣይ ኣብ ዶም፡ ብዝዓበየ ትእዛዝ

ሳልሳይ ኣብ ዶም፡ ብትእዛዝ 1

html ዝብል ጽሑፍ ኣሎ።

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

ከምኡ ውን responsive .order-firstand classes ኣለዉ ን ናይ ሓደ ባእታ ብቕደም ተኸተል ብምትግባር .order-lastዝቕይሩ , ብቕደም ተኸተል። እዞም ክፍልታት እዚኦም ከም ኣድላይነቱ ምስቶም ቁጽሪ ዘለዎም ክፍልታት እውን ክሕወሱ ይኽእሉ እዮም ።orderorder: -1order: 6.order-*

ቀዳማይ ኣብ ዶም፡ ናይ መወዳእታ ተኣዚዙ

ኣብ ዶም ካልኣይ፡ ስርዓት ዘይብሉ

ኣብ ዶም ሳልሳይ፡ መጀመርታ ተኣዚዙ

html ዝብል ጽሑፍ ኣሎ።

<div class="container text-center">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

ምትዕርራይ ዓምድታት

ዓምድታት ሽቦ ብኽልተ መንገዲ ክትመዓራረዮም ትኽእል ኢኻ: ናትና ምላሽ ዝህቡ .offset-ሽቦ ክፍልታትን ናይ ወሰን ዩቲሊቲታትናን . ሽቦ ክፍልታት ምስ ዓምድታት ንኽሰማምዑ ዓቐን ክግበረሎም እንከሎ ወሰናት ድማ ንቕልጡፍ ኣቀማምጣታት ዝያዳ ጠቐምቲ ኮይኖም ስፍሓት ናይቲ ኦፍሴት ተለዋዋጢ እዩ።

ናይ ኦፍሴት ክፍልታት

.offset-md-*ክፍልታት ተጠቒምካ ዓምድታት ናብ የማን ኣንቀሳቕሶም ። እዞም ክፍልታት እዚኣቶም ንጸጋማይ ወሰን ናይ ሓደ ዓምዲ *ብዓምድታት ይውስኽዎ። ንኣብነት ኣብ ልዕሊ ኣርባዕተ ዓምድታት .offset-md-4ይንቀሳቐስ ።.col-md-4

.col-md-4 ዝብል ጽሑፍ ኣሎ።

.ኮል-ኤምዲ-4 .ኦፍሴት-ኤምዲ-4

.ኮል-ኤምዲ-3 .ኦፍሴት-ኤምዲ-3

.ኮል-ኤምዲ-6 .ኦፍሴት-ኤምዲ-3

html ዝብል ጽሑፍ ኣሎ።

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

ኣብ ርእሲ ምጽራይ ዓምዲ ኣብ ምላሽ ዝህቡ ነጥብታት ምብታኽ፡ ንኦፍሴታት ዳግማይ ምትካል ከድልየካ ይኽእል እዩ። ነዚ ብተግባር ኣብቲ ናይ ሽቦ ኣብነት ርአ ።

.ኮል-ስም-5 .ኮል-ምድ-6

.ኮል-ኤስኤም-5 .ኦፍሴት-ኤስኤም-2 .ኮል-ኤምዲ-6 .ኦፍሴት-ኤምዲ-0

.ኮል-ስም-6 .ኮል-ምድ-5 .ኮል-ልግ-6

.ኮል-ኤስኤም-6 .ኮል-ኤምዲ-5 .ኦፍሴት-ኤምዲ-2 .ኮል-ኤልጂ-6 .ኦፍሴት-ኤልጂ-0

html ዝብል ጽሑፍ ኣሎ።

<div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

ማርጅን ዩቲሊቲታት

.me-autoምስ ምግዓዝ ናብ flexbox ኣብ v4፡ ከም ናይ ኣሕዋት ዓምድታት ካብ ነንሕድሕዶም ንምርሓቕ ዝኣመሰሉ ማርጅን ዩቲሊቲታት ክትጥቀም ትኽእል ።

.col-md-4 ዝብል ጽሑፍ ኣሎ።

.col-md-4 .ms-ኣውቶ ዝብል ጽሑፍ ኣሎ።

.col-md-3 .ms-md-ኣውቶ ዝብል ጽሑፍ ኣሎ።

.ኮል-ኣውቶ .ኣነ-ኣውቶ

.ኮል-ኣውቶ

html ዝብል ጽሑፍ ኣሎ።

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

ንበይኖም ዝሕግዙ ዓምዲ ክፍልታት

እቶም ክፍልታት ካብ a ወጻኢ ንሓደ ባእታ ፍሉይ ስፍሓት ንምሃብ .col-*እውን ክጥቀሙ ይኽእሉ ። .rowዓምዲ ክፍልታት ከም ዘይቀጥታዊ ቆልዑ ናይ ሓደ መስርዕ ኣብ ዝጥቀሙሉ እዋን፡ እቶም መሸፈኒታት ይግደፉ።

.col-3: ስፍሓት 25% .

.col-sm-9: ስፍሓት 75% ልዕሊ sm ስብራት ነጥቢ

html ዝብል ጽሑፍ ኣሎ።

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

እቶም ክፍልታት ምስ ዩቲሊቲታት ብሓባር ኮይኖም ምላሽ ዝህቡ ዝንሳፈፉ ምስልታት ንምፍጣር ክጥቀሙ ይኽእሉ። .clearfixእቲ ጽሑፍ ዝሓጸረ እንተኾይኑ ነቲ መንሳፈፊ ንምጽራይ ነቲ ትሕዝቶ ኣብ መጠቕለሊ ምጥቕላል ኣረጋግጽ ።

ሓደ ሕጡበ ጽሑፍ ናይ ቦታ መትሓዚ ጽሑፍ። ኣብዚ ንኣጠቓቕማ ናይቲ clearfix class ንምርኣይ ኢና ንጥቀመሉ ዘለና። ኣብዚ እቶም ዓምድታት ምስቲ ዝንሳፈፍ ምስሊ ብኸመይ ከም ዝራኸቡ ንምግላጽ ቁሩብ ትርጉም ዘይብሎም ሓረጋት ንውስኽ ኣለና።

ከምቲ ትርእይዎ ዘለኹም እቶም ሕጡበ-ጽሑፋት ብጸጋ ኣብ ዙርያ እቲ ተንሳፋፊ ምስሊ ይጠቕልሉ ኣለዉ። ሕጂ እዚ ምስ ገለ ጭቡጥ ትሕዝቶ ኣብዚ ከመይ ከም ዝመስል እሞ ሕሰብዎ፣ ኣብ ክንዲ እዚ ጥራይ ዝቕጽልን ዝቕጽልን ኣሰልቻዊ ቦታ ዝሓዘ ጽሑፍ፣ ግን ብሓቂ ዝኾነ ዝጭበጥ ሓበሬታ ኣብ ዘመሓላልፍ። በቃ ቦታ ዝወስድ ስለ ዝኾነ ብሓቂ ክነበብ የብሉን።

ከምኡ ውን ገና፡ እንሆ፡ ሕጂ’ውን ነዚ ቦታ ዝሓዘ ጽሑፍ ኣብ ምንባብ ትጽዕር፡ ገለ ተወሳኺ ርድኢት፡ ወይ ገለ ሕቡእ እንቋቑሖ ፋሲካ ትሕዝቶ ተስፋ ብምግባር። ዋዛ ምናልባት። እቲ ዘሕዝን ግን ኣብዚ ካብዚ ዝኾነ የለን።

html ዝብል ጽሑፍ ኣሎ።

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>