ስርዓት ሽቦ

ሳላ ዓሰርተው ክልተ ዓምድታት ስርዓት፣ ሽዱሽተ ነባሪ ምላሽ ዝህቡ ደረጃታት፣ Sass ተለዋዋጢን ሚክሲንን፣ ከምኡ’ውን ዓሰርተታት ኣቐዲሞም ዝተነጸሩ ክፍልታትን ናይ ኩሉ ቅርጽታትን ዓቐንን ኣቀማምጣታት ንምህናጽ ሓያል ሞባይል-ቀዳማይ ፍሌክስቦክስ ሽቦና ተጠቐም።

ኣብዚ ገጽ

ኣብነት

ናይ ቡትስትራፕ ስርዓተ ሽቦ ንትሕዝቶ ንምቕማጥን ንምስምማዕን ተኸታተልቲ መትሓዚታት፡ መስመራትን ዓምድታትን ይጥቀም። ብ flexbox ዝተሰርሐ ኮይኑ ምሉእ ብምሉእ ምላሽ ዝህብ እዩ። ኣብ ታሕቲ ኣብነትን ስርዓት ሽቦ ብኸመይ ከም ዝእከብን ዓሚቝ መብርህን ኣሎ።

ሓድሽ ወይ ዘይትፈልጦ ፍሌክስቦክስ? ድሕረ ባይታ፣ ስነ-ቓላት፣ መምርሒታትን ቁንጣሮ ኮድን ነዚ ናይ CSS Tricks flexbox መምርሒ ኣንብብዎ ።

ሪጋ

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

እዚ ኣብ ላዕሊ ዝተጠቕሰ ኣብነት ኣብ ኩሎም መሳርሕታትን ቪውፖርትን ሰለስተ ማዕረ ስፍሓት ዘለዎም ዓምድታት ይፈጥር፡ እቶም ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታትና ብምጥቃም። እቶም ዓምድታት ኣብቲ ገጽ ምስቲ ወላዲ ማእከል ይገብሩ .container።

ከመይ ይሰርሕ

ምፍራስ ድማ፡ ስርዓት ሽቦ ብኸመይ ከም ዝእከብ እንሆ፤

ሽቦና ሽዱሽተ ምላሽ ዝህቡ ነጥብታት ይድግፍ ። ነጥብታት ምብታኽ ኣብ ሕቶታት ሚድያ ዝተመርኮሱ እዮም min-width፣ ማለት ነታ ነጥቢ ምብታኽን ንኹሎም ልዕሊኡ ዘለዉን ይጸልዉ (ንኣብነት፣ ን , , , , ከምኡውን .col-sm-4ይምልከት )። እዚ ማለት ብነፍሲ ወከፍ ነጥቢ ምብታኽ ንዓቐንን ባህርን ኮንተይነርን ዓምድን ክትቆጻጸሮ ትኽእል ኢኻ።smmdlgxlxxl
ኮንተይነራት ማእከልን ብኣግማድ ንትሕዝቶኻ ምዕሻግን። .containerንሓደ ምላሽ ዝህ�� ስፍሓት ፒክሰል ተጠቐም ፣ .container-fluidን width: 100%ኣብ መላእ ኩሎም ርእይቶታትን መሳርሕታትን፣ ወይ መልሲ ዝህብ መትሓዚ (ንኣብነት፣ .container-md) ንውህደት ፈሳስን ስፍሓት ፒክሰልን ተጠቐም።
መስመራት ንዓምድታት ዝኸውን መጠቕለሊ እዮም። ነፍሲ ወከፍ ዓምዲ paddingኣብ መንጎኦም ዘሎ ቦታ ዝቆጻጸር ኣግማድ (ጉተር ዝበሃል) ኣለዎ። እዚ paddingድሕሪኡ ኣብቶም ኣሉታዊ ወሰን ዘለዎም መስመራት ይቃወም እሞ እቲ ኣብ ዓምድታትካ ዘሎ ትሕዝቶ ብዓይኒ ብጸጋማይ ሸነኽ ንታሕቲ ተሰሪዑ ከምዘሎ የረጋግጽ። መስመራት ብተወሳኺ ንዓምዲ ምዕባይ ብሓደ ዓይነት መንገዲ ንምትግባር ናይ መቐየሪ ክፍልታት ይድግፉን ናይ ትሕዝቶኻ ርሕቀት ንምቕያር ናይ ጓተር ክፍልታትን ይድግፉ።
ዓምድታት ንምእማኑ ዘጸግም ተዓጻጻፍነት ኣለዎም። ኣብ ነፍሲ ወከፍ መስርዕ 12 ናይ ቅጥዒ ዓምድታት ኣለዉ፣ እዚ ድማ ዝኾነ ቁጽሪ ዓምድታት ዝሽፍን ዝተፈላለየ ውህደት ባእታታት ክትፈጥር የኽእለካ። ናይ ዓምዲ ክፍልታት ብዝሒ ናይ ቅጥዒ ዓምድታት ክሽፍኑ ይሕብሩ (ንኣብነት col-4፡ ስፓን ኣርባዕተ)። widths ብሚእታዊት ስለዝተቐመጡ ኩሉ ግዜ ሓደ ዓይነት ኣንጻራዊ ዓቐን ኣለካ።
ጓተር እውን ምላሽ ዝህቡን ብዓይነት ዝቕየሩን እዮም። ናይ ጓተር ክፍልታት ኣብ ኩሉ ናይ ምብታኽ ነጥብታት ይርከቡ፣ ኩሎም ሓደ ዓይነት ዓቐን ምስ ናትና ወሰንን ናይ መሸፈኒ ርሕቀትን . ንኣግማድ ጐዳጉዲ ምስ .gx-*ክፍልታት ምቕያር፣ ቀጥታዊ ጐዳጉዲ ምስ .gy-*፣ ወይ ኩሎም ጐዳጉዲ ምስ .g-*ክፍልታት ምቕያር። .g-0ንመጉዳእቲ ጐዳጉዲ ንምእላይ እውን ይርከብ።
Sass variables, maps, and mixins ነቲ ሽቦ ሓይሊ ይህብዎ። ኣብ Bootstrap ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት ክትጥቀሙ እንተዘይደሊኹም፡ ናይ ሽቦና ምንጪ Sass ተጠቒምኩም ናይ ገዛእ ርእስኹም ምስ ዝያዳ ትርጉማዊ ምልክት ክትፈጥሩ ትኽእሉ ኢኹም። ብተወሳኺ ገለ CSS custom properties ነዞም ናይ Sass ተለዋዋጢ ረቛሒታት ንዓኹም ዝያዳ ተዓጻጻፍነት ንኽህልወኩም ነካትት።

ኣብ ከባቢ flexbox ዘሎ ድሩትነትን ስሕተትን ኣስተውዕል ፣ ከም ገለ HTML ባእታታት ከም flex containers ክትጥቀም ዘይምኽኣል ።

ናይ ሽቦ ኣማራጺታት

ናይ ቡትስትራፕ ስርዓተ ሽቦ ኣብ ኩሎም ሽዱሽተ ነባሪ ነጥብታት ምብታኽ ክላመድ ይኽእል፣ ከምኡ’ውን ዝኾነ ትመዓራረዮ ናይ ምብታኽ ነጥብታት። እቶም ሽዱሽተ ነባሪ ደረጃታት ሽቦ ከምዚ ዝስዕብ እዮም፤

ተወሳኺ ንእሽቶ (xs)
ንእሽቶ (sm) .
ማእከላይ (md) .
ዓቢ (lg) .
ተወሳኺ ዓቢ (xl)
ተወሳኺ ተወሳኺ ዓቢ (xxl)

ከምቲ ኣብ ላዕሊ ዝተገልጸ፡ ነፍሲ ወከፍ ካብዞም ነጥብታት ምብታኽ፡ ናይ ገዛእ ርእሶም መትሓዚ፡ ፍሉይ ናይ ክፍሊ ቅድመ-ጥብቆን መቐየሪታትን ኣለዎም። ኣብዞም ስብራት ነጥብታት እቲ ሽቦ ብኸመይ ከም ዝቕየር ኣብዚ ኣሎ፤

	xs <576px ዝብል ምዃኑ ይፍለጥ	sm ≥576px ዝብል እዩ።	md ≥768px ዝብል እዩ።	lg ≥992px ዝብል እዩ።	xl ≥1200px ዝብል እዩ።	xxl ≥1400px ዝብል እዩ።
ኮንተይነር`max-width`	ዝኾነ (ኣውቶ)	540px ዝብል እዩ።	720px ዝብል እዩ።	960px ዝብል እዩ።	1140px ዝብል እዩ።	1320px ዝብል እዩ።
ቅድመ-ጥብቆ ክፍሊ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# ናይ ዓምድታት	12.
ስፍሓት ጐዳጉዲ	1.5rem (.75rem ብጸጋምን የማንን)
ብሕታዊ ጐዳጉዲ	እወ
ሰፈር ዘለዎ	እወ
ዓምዲ ምእዛዝ	እወ

ኣውቶ-ኣቀማምጣ ዓምድታት

ንቐሊል ዓቐን ዓምዲ ብዘይ ግሉጽ ቁጽሪ ዘለዎ ክፍሊ ከም .col-sm-6.

ማዕረ-ስፍሓት ዘለዎ

ንኣብነት፡ ኣብዚ ክልተ ናይ ሽቦ ኣቀማምጣታት ኣለዉ፡ ንነፍሲ ወከፍ መሳርሕን ቪውፖርትን ዝምልከቱ፡ ካብ xsክሳብ xxl። ንነፍሲ ወከፍ ዘድልየካ ነጥቢ ምብታኽ ዝኾነ ቁጽሪ ኣሃዱ ዘይብሎም ክፍልታት ወስኹ እሞ ነፍሲ ወከፍ ዓምዲ ሓደ ዓይነት ስፍሓት ክህልዎ እዩ።

1 ካብ 2

2 ካብ 2

1 ካብ 3

2 ካብ 3

3 ካብ 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ስፍሓት ሓደ ዓምዲ ምቕማጥ

ኣውቶ-ኣቀማምጣ ንፍሌክስቦክስ ግሪድ ዓምድታት እውን ስፍሓት ናይ ሓደ ዓምዲ ከተቐምጥን እቶም ኣሕዋት ዓምድታት ብኣውቶማቲክ ኣብ ዙርያኡ ዓቐኖም ክቕይሩን ትኽእል ማለት እዩ። ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት (ከምቲ ኣብ ታሕቲ ተገሊጹ ዘሎ)፡ ናይ ሽቦ ምትሕውዋሳት፡ ወይ ናይ ውሽጢ መስመር ስፍሓት ክትጥቀም ትኽእል ኢኻ። እቶም ካልኦት ዓምድታት ስፍሓት ናይቲ ማእከላይ ዓምዲ ብዘየገድስ ዓቐን ከም ዝቕይሩ ኣስተውዕል።

1 ካብ 3

2 ካብ 3 (ዝሰፍሐ)

3 ካብ 3

1 ካብ 3

2 ካብ 3 (ዝሰፍሐ)

3 ካብ 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ተለዋዋጢ ስፍሓት ትሕዝቶ

col-{breakpoint}-autoዓምድታት ኣብ ተፈጥሮኣዊ ስፍሓት ትሕዝቶኦም ተመርኲስካ ንምዕባይ ክፍልታት ተጠቐም ።

1 ካብ 3

ተለዋዋጢ ስፍሓት ትሕዝቶ

3 ካብ 3

1 ካብ 3

ተለዋዋጢ ስፍሓት ትሕዝቶ

3 ካብ 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ምላሽ ዝህቡ ክፍልታት

ናይ ቡትስትራፕ ሽቦ ንምህናጽ ዝተሓላለኹ ምላሽ ዝህቡ ኣቀማምጣ ሽዱሽተ ደረጃታት ኣቐዲሞም ዝተነጸሩ ክፍልታት የጠቓልል። ዓቐን ዓምድታትካ ኣብ ተወሳኺ ንኣሽቱ፡ ንኣሽቱ፡ ማእከላይ፡ ዓበይቲ፡ ወይ ተወሳኺ ዓበይቲ መሳርሒታት ብዝደለኻዮ መንገዲ ኣመዓራርዮ።

ኩሎም ነጥብታት ምብታኽ

ካብ ዝነኣሰ መሳርሒታት ክሳብ ዝዓበየ ሓደ ዓይነት ዝኾኑ ሽቦታት .col፡ and .col-*classes ተጠቐም። ፍሉይ ዓቐን ዘለዎ ዓምዲ ኣብ ዘድልየካ እዋን ቁጽሪ ዘለዎ ክፍሊ ምግላጽ፤ እንተዘይኮይኑ፡ ኣብ .col.

ቆሎ

ኮል-8

ኮሎ-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

ናብ ኣግማድ ተደራሪቡ።

ሓደ ስብስብ ክፍልታት ብምጥቃም ፡ ተደራሪቡ ዝጅምርን ኣብቲ ንእሽቶ ነጥቢ ምብታኽ ( ) .col-sm-*ልኡል ዝኸውንን መሰረታዊ ስርዓተ ሽቦ ክትፈጥር ትኽእል ኢኻ ።sm

ኮል-ስም-8

ኮል-ስም-4

ኮል-ስም

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

ምትሕውዋስን ምትሕውዋስን

ዓምድታትካ ኣብ ገለ ደረጃታት ሽቦ ጥራይ ክድምር ኣይትደልን ዲኻ? ከም ኣድላይነቱ ንነፍሲ ወከፍ ደረጃ ዝተፈላለዩ ክፍልታት ውህደት ተጠቐም። ኩሉ ብኸመይ ከም ዝሰርሕ ዝሓሸ ሓሳብ ንምርካብ ኣብ ታሕቲ ዘሎ ኣብነት ርአ።

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

.ኮል-6 .ኮል-ምድ-4

.ኮል-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

ዓምድታት መስርዕ

.row-cols-*ንትሕዝቶኻን ኣቀማምጣኻን ብዝበለጸ ዝገልጹ ዓምድታት ብቕልጡፍ ንምቕማጥ ነቶም ምላሽ ዝህቡ ክፍልታት ተጠቐም ። ንቡር .col-*ክፍልታት ኣብ ውልቀ ዓምድታት (ንኣብነት, .col-md-4) ክምልከቱ እንከለዉ፡ እቶም ናይ መስርዕ ዓምድታት ክፍልታት ኣብቲ ወላዲ .rowከም ነባሪ ንዝተሓዙ ዓምድታት ይቕመጡ። .row-cols-autoምስኻ ነቶም ዓምድታት ተፈጥሮኣዊ ስፍሓቶም ክትህቦም ትኽእል ኢኻ ።

ነዞም ናይ መስርዕ ዓምድታት ክፍልታት ብቕልጡፍ መሰረታዊ ኣቀማምጣ ሽቦ ንምፍጣር ወይ ንኣቀማምጣ ካርድኻ ንምቁጽጻርን ብደረጃ ዓምዲ ኣብ ዘድልየሉ እዋን ንምግዳፍን ተጠቐመሎም።

ሪጋ

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ሪጋ

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ሪጋ

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ሪጋ

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ሪጋ

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ሪጋ

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ሪጋ

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

ብተወሳኺ ምስኡ ዘሎ Sass mixin ክትጥቀሙ ትኽእሉ ኢኹም፣ row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

ምድቃል

ትሕዝቶኻ ምስቲ ነባሪ ሽቦ ንምስፋር፡ ኣብ ውሽጢ ሓደ ዝጸንሐ ዓምዲ ሓድሽን .rowስብስብን ዓምድታት ወስኸሉ ። ዝተሰፍሩ መስመራት ክሳብ 12 ወይ ትሕቲኡ ዝድመር ስብስብ ዓምድታት ከጠቓልሉ ኣለዎም (ኩሎም እቶም 12 ዘለዉ ዓምድታት ክትጥቀመሎም ኣየድልን እዩ)።.col-sm-*.col-sm-*

ደረጃ 1፡ .col-sm-3

ደረጃ 2፡ .col-8 .col-sm-6

ደረጃ 2፡ .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

ሳስ

ናይ Bootstrap ምንጪ Sass ፋይላት ክትጥቀም ከለኻ፡ Sass variables and mixins ተጠቒምካ ብሕታዊ፡ ትርጉማውን ምላሽ ዝህብን ገጽ ኣቀማምጣ ክትፈጥር ኣማራጺ ኣለካ። ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታትና ነዞም ሓደ ዓይነት ተለዋዋጢ ረቛሒታትን ሚክሲናትን ብምጥቃም ንቕልጡፍ ምላሽ ዝህቡ ኣቀማምጣ ምሉእ ስብስብ ድሉዋት ንጥቕሚ ዘለዎም ክፍልታት ይህቡ።

ተለዋዋጢ ረቛሒታት

ተለዋዋጢ ዋጋታትን ካርታታትን ብዝሒ ዓምድታት፡ ስፍሓት ጐዳጉዲን ተንሳፋፊ ዓምድታት ዝጅምረሉ ናይ ሚድያ ሕቶ ነጥቢን ይውስኑ። ነዚኦም ኣብ ላዕሊ ዝተሰነዱ ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት ንምፍጣር ንጥቀመሎም፣ ከምኡ’ውን ነቶም ኣብ ታሕቲ ተዘርዚሮም ዘለዉ ብሕታዊ ሚክሲናት።

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

ሚክሲን ዝበሃሉ ምዃኖም ይፍለጥ

ሚክሲን ምስ ተለዋዋጢ ሽቦ ተተሓሒዙ ንውልቀ ዓምድታት ሽቦ ትርጉማዊ CSS ንምፍጣር ይጥቀሙ።

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

ኣብነት ኣጠቓቕማ

ነቶም ተለዋዋጢ ዋጋታት ናብ ናይ ገዛእ ርእስኻ ብሕታዊ ክብርታት ክትቅይሮም ትኽእል ኢኻ፣ ወይ ድማ ነቶም ሚክሲናት ምስ ነባሪ ክብርታቶም ጥራይ ክትጥቀመሎም ትኽእል ኢኻ። ኣብ መንጎ ክፍተት ዘለዎ ክልተ ዓምዲ ዘለዎ ኣቀማምጣ ንምፍጣር ነባሪ ቅጥዕታት ምጥቃም ኣብነት ኣብዚ ኣሎ።

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

ቀንዲ ትሕዝቶ

ካልኣዊ ትሕዝቶ

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ነቲ ሽቦ ብዝጥዕመካ ምምዕርራይ

ኣብ ውሽጢ ዝተሃንጹ ናይ ሽቦ ሳስ ተለዋዋጢ ረቛሒታትን ካርታታትን ብምጥቃም፡ ነቶም ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት ምሉእ ብምሉእ ምምዕርራይ ይከኣል እዩ። ብዝሒ ደረጃታት፡ መለክዒታት ሕቶ ሚድያን ስፍሓት መትሓዚን ቀይር-ድሕሪኡ ዳግማይ ምትእኽኻብ።

ዓምድታትን ጐዳጉዲን

ብዝሒ ዓምድታት ሽቦ ብመንገዲ ተለዋዋጢ ሳስ ክቕየር ይኽእል። $grid-columnsስፍሓት (ብሚእታዊት) ናይ ነፍሲ ወከፍ ውልቃዊ ዓምዲ ንምፍጣር ዝጥቀመሉ ኮይኑ $grid-gutter-widthንዓምዲ ጐዳጉዲ ዝኸውን ስፍሓት የቐምጥ።

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

ደረጃታት ሽቦ

ኪኖ እቶም ዓምድታት ባዕሎም ብምስግጋር፡ ቁጽሪ ናይ ሽቦ ደረጃታት እውን ክትቅይሮ ትኽእል ኢኻ። ኣርባዕተ ደረጃታት ሽቦ ጥራይ እንተትደሊ፡ ነቲ $grid-breakpointsand $container-max-widthsናብ ከምዚ ዝኣመሰለ ምተመሓየሽካዮ፤

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

ኣብ ሳስ ተለዋዋጢ ወይ ካርታታት ዝኾነ ለውጢ ክትገብር ከለኻ፡ ለውጥታትካ ክትዕቅብን ዳግማይ ክትጥርንፍን ከድልየካ እዩ። ከምኡ ምግባር ንዓምዲ ስፍሓት፣ ምትዕርራይን ምእዛዝን ፍጹም ሓድሽ ስብስብ ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት ከውጽእ እዩ። ምላሽ ዝህቡ ናይ ርኡይነት ዩቲሊቲታት እውን ነቶም ብሕታዊ ናይ ምብታኽ ነጥብታት ንምጥቃም ክመሓየሹ እዮም። pxናይ ሽቦ ክብርታት ኣብ (ኣይኮነን rem, em, ወይ %) ምቕማጥካ ኣረጋግጽ ።