ስርዓት ሽቦ

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

ከመይ ይሰርሕ

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

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

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

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

ምፍራስ ከመይ ከም ዝሰርሕ እንሆ፤

ኮንተይነራት ንትሕዝቶ መርበብ ሓበሬታኻ ኣብ ማእከልን ብተዘዋዋሪ መንገዲ ንምልማድን ዝሕግዝ መሳርሒ ይህቡ። .containerንሓደ ምላሽ ዝህብ ስፍሓት ፒክሰል ወይ .container-fluidን width: 100%ኣብ መላእ ኩሉ ዓቐናት ምርኣይን መሳርሒን ተጠቐም ።
መስመራት ንዓምድታት ዝኸውን መጠቕለሊ እዮም። ነፍሲ ወከፍ ዓምዲ paddingኣብ መንጎኦም ዘሎ ቦታ ዝቆጻጸር ኣግማድ (ጉተር ዝበሃል) ኣለዎ። እዚ paddingድሕሪኡ ኣብቲ ኣሉታዊ ወሰን ዘለዎም መስመራት ይቃወም። በዚ መንገዲ እዚ፡ ኩሉ ኣብ ዓምድታትካ ዘሎ ትሕዝቶ ብዓይኒ ብጸጋማይ ሸነኽ ንታሕቲ ተሰሪዑ ይርከብ።
ኣብ ኣቀማምጣ ሽቦ፡ ትሕዝቶ ኣብ ውሽጢ ዓምድታት ክቕመጥ ኣለዎ፡ ዓምድታት ጥራይ ድማ ቅጽበታዊ ደቂ መስመራት ክኾኑ ይኽእሉ።
ሳላ flexbox፡ ዝተወሰነ ዘይብሎም ዓምድታት ሽቦ widthብኣውቶማቲክ ከም ማዕረ ስፍሓት ዘለዎም ዓምድታት ክቐርጹ እዮም። ንኣብነት ኣርባዕተ ኣጋጣሚታት ናይ .col-smነፍሲ ወከፎም ብኣውቶማቲክ ካብቲ ንእሽቶ ምብታኽን ንላዕሊን 25% ስፍሓት ክህልዎም እዩ። ንተወሳኺ ኣብነታት ኣብቲ ኣውቶ-ኣቀማምጣ ዓምድታት ዝብል ክፍሊ ርአ።
ናይ ዓምዲ ክፍልታት ካብቶም ኣብ ሓደ መስርዕ ክህልዉ ዝኽእሉ 12 ክትጥቀመሎም እትደሊ ዓምድታት ይሕብሩ። ስለዚ፡ ሰለስተ ማዕረ ስፍሓት ዘለዎም ዓምድታት ስግር እንተደሊኻ፡ ክትጥቀም ትኽእል ኢኻ .col-4።
ዓምድታት widths ብሚእታዊት ይቕመጡ፣ ስለዚ ኩሉ ግዜ ፈሳስን ዓቐንን ብተዛማዲ ምስ ወላዲ ባእታኦም እዮም።
ዓምድታት ኣብ መንጎ ውልቀ ዓምድታት ንዘለዉ ጐዳጉዲ ንምፍጣር ኣግማድ ኣለዎም padding፣ ይኹን እምበር፣ ነቲ marginካብ መስመራትን paddingካብ ዓምድታትን ምስ .no-guttersኣብ ልዕሊ .row.
ነቲ ሽቦ ምላሽ ዝህብ ንምግባር፡ ሓሙሽተ ናይ ሽቦ ምብታኽ ነጥብታት ኣለዉ፡ ንነፍሲ ወከፍ ምላሽ ዝህብ ነጥቢ ምብታኽ ሓደ : ኩሎም ነጥብታት ምብታኽ (ተወሳኺ ንኣሽቱ)፡ ንኣሽቱ፡ ማእከላይ፡ ዓበይቲ፡ ከምኡ’ውን ተወሳኺ ዓበይቲ።
ሽቦ ምብታኽ ነጥብታት ኣብ ዝተሓተ ስፍሓት ሚድያ ሕቶታት ዝተመርኮሱ እዮም፣ ማለት ኣብታ ሓደ ስንብራት ነጥቢን ኩሎም ኣብ ልዕሊኡ ዘለዉን ይምልከቱ (ንኣብነት፣ .col-sm-4ንንኣሽቱ፣ ማእኸለዎት፣ ዓበይትን ተወሳኺ ዓበይትን መሳርሒታት ይምልከቱ፣ ግን ኣብቲ ቀዳማይ xsነጥቢ ኣይምልከትን)።
ንዝያዳ ትርጉማዊ ምልክት ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት (ከም .col-4) ወይ Sass mixins ክትጥቀም ትኽእል ኢኻ ።

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

ናይ ሽቦ ኣማራጺታት

ቡትስትራፕ ንመብዛሕትኦም ዓቐናት ንምግላጽ ems ወይ s ክጥቀም እንከሎ ፡ s ንናይ ሽቦ ምብታኽ ነጥብታትን ስፍሓት መትሓዚን ይጥቀሙ። እዚ ዝኾነሉ ምኽንያት ድማ ስፍሓት ቪውፖርት ብፒክሰል ስለዝኾነ ምስ ዓቐን ቅርጺ ፊደል ስለዘይቅየር ’ ዩ ።rempx

መዳያት ናይ ቡትስትራፕ ግሪድ ስርዓት ኣብ ብዙሓት መሳርሒታት ምስ ሓደ ምቹእ ሰደቓ ብኸመይ ከም ዝሰርሑ ርአ።

	ተወሳኺ ንእሽቶ <576px	ንእሽቶ ≥576px	ማእከላይ ≥768px	ዓቢ ≥992px	ተወሳኺ ዓቢ ≥1200px
ማክስ ስፍሓት መትሓዚ	ዝኾነ (ኣውቶ)	540px ዝብል እዩ።	720px ዝብል እዩ።	960px ዝብል እዩ።	1140px ዝብል እዩ።
ቅድመ-ጥብቆ ክፍሊ	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ናይ ዓምድታት	12.
ስፍሓት ጐዳጉዲ	30px (15px ኣብ ነፍሲ ወከፍ ሸነኽ ናይ ሓደ ዓምዲ)
ሰፈር ዘለዎ	እወ
ዓምዲ ምእዛዝ	እወ

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

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

ማዕረ-ስፍሓት ዘለዎ

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

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>

ማዕረ ስፍሓት ዘለዎ ብዙሕ መስመር

.w-100ዓምድታት ናብ ሓድሽ መስመር ክሰብሩሉ እትደልዮ ቦታ ብምእታው ንብዙሓት መስመራት ዝሽፍኑ ማዕረ ስፍሓት ዘለዎም ዓምድታት ፍጠር ። .w-100ምስ ገለ ምላሽ ዝህቡ ናይ ምርኢት ዩቲሊቲታት ብምሕዋስ እቶም ዕረፍቲ ምላሽ ዝህቡ ግበሮም ።

እዚ ብዘይ ግሉጽflex-basis ወይ border. ንኣረጊት ስሪት መርበብ ሓበሬታ መፍትሒታት ኣለዉ፡ እንተኾነ ግን ዕላማ ዝገበርካዮም ዳህሰስቲ ኣብቲ ስሕተት ዘለዎም ስሪት እንተዘይወዲቖም ኣድለይቲ ክኾኑ የብሎምን።

ቆሎ

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</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>

ጐዳጉዲ

ጓተርስ ብነጥቢ ምብታኽ-ፍሉይ መሸፈኒን ኣሉታዊ ወሰን ዩቲሊቲ ክፍልታትን ምላሽ ክስተኻኸሉ ይኽእሉ። ኣብ ዝተዋህበ መስርዕ ንዘለዉ ጐዳጉዲ ንምቕያር፡ ኣብ ልዕሊ እቲ ኣሉታዊ ማርጅን ዩቲሊቲን ኣብቲ s .rowዝሰማማዕ ፓዲንግ ዩቲሊቲታትን ኣጣምሮ ። .colእቲ .containerወይ .container-fluidወላዲ ዘይተደልየ ምፍሳስ ንኸይፍጠር እውን ምትዕርራይ ከድልዮ ይኽእል እዩ፣ እንደገና ዝሰማማዕ ፓዲንግ ዩቲሊቲ ብምጥቃም።

lgኣብቲ ዓቢ ( ) ናይ ምብታኽ ነጥቢን ልዕሊኡን ንናይ Bootstrap grid ምምዕርራይ ኣብነት ኣብዚ ኣሎ ። ነቲ .colፓዲንግ ምስ ኣዕቢናዮ ኣለና .px-lg-5፣ ነቲ ምስ .mx-lg-n5ኣብ ልዕሊ ወላዲ ኣቃሊስናዮ .rowድሕሪኡ ነቲ .containerመጠቕለሊ ብ .px-lg-5.

ብሕታዊ ዓምዲ ምዕሻግ

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

ዓምድታት መስርዕ

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

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

ሪጋ

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

ብተወሳኺ ምስኡ ዘሎ 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);
  }
}

ኣሰላልፋ

ዓምድታት ብቐጥታን ብኣግማድን ንምስላፍ flexbox alignment utilities ተጠቐም። ኢንተርነት ኤክስፕሎረር 10-11 ከምቲ ኣብ ታሕቲ ዘሎ ፍሌክስ ኮንተይነር ምስ ዝህልዎ ቀጥታዊ ኣሰላልፋ ናይ ፍሌክስ ነገራት ኣይድግፉን እዮም ። min-height ንዝያዳ ዝርዝር ሓበሬታ Flexbugs #3 ርአ።

ቀጥታዊ ኣሰላልፋ

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

<div class="container">
  <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>

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

<div class="container">
  <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>

ልኡል ኣሰላልፋ

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

<div class="container">
  <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>

ጐዳጉዲ የለን

ኣብቲ ኣቐዲሙ ዝተነጸረ ናይ ሽቦ ክፍልታትና ኣብ መንጎ ዓምድታት ዝርከቡ ጐዳጉዲ ብ .no-gutters. እዚ ድማ ነቲ ኣሉታዊ margins ካብ ኩሎም ናይ ቀረባ ህጻናት ዓምድታትን .rowነቲ ኣግማድ ድማ የወግዶ።padding

ነዞም ቅዲታት ንምፍጣር ዝሕግዝ ምንጪ ኮድ ኣብዚ ኣሎ። ኣስተውዕል፡ ምግዳፍ ዓምዲ ናብቶም ቀዳሞት ናይ ቆልዑ ዓምድታት ጥራይ ስፍሓት ከም ዝግበረሎምን ብመንገዲ መምረጺ ባህርያት ዕላማ ዝገበሩን እዮም ። እዚ ዝያዳ ፍሉይ መምረጺ ክፈጥር እንከሎ፡ ዓምዲ ምዕሻግ ጌና ብዝያዳ ብናይ ርሕቀት መገልገሊታት ክመዓራረ ይኽእል .

ካብ ወሰን ናብ ወሰን ዝኸይድ ዲዛይን የድልየካ? ነቲ ወላዲ .containerወይ .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

ብተግባር እንሆ ከመይ ይመስል። ኣስተውዕል ነዚ ምስ ኩሎም ካልኦት ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት (ስፍሓት ዓምዲ፣ ምላሽ ዝህቡ ደረጃታት፣ ዳግመ-ምስርዓትን ካልእን ሓዊስካ) ክትጥቀመሉ ትኽእል ኢኻ።

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

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

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ዓምዲ ምጥቕላል

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

.ኮል-9

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

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

<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

<div class="container">
  <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

<div class="container">
  <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-2112

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

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

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

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

ብተወሳኺ ናይ ሓደ ባእታ ብቕደም ተኸተል ብምትግባርን ( )ን ዝቕይሩ መልሲ .order-firstዝህቡን ክፍልታትን ኣለዉ። እዞም ክፍልታት እዚኦም ከም ኣድላይነቱ ምስቶም ቁጽሪ ዘለዎም ክፍልታት እውን ክሕወሱ ይኽእሉ እዮም ።.order-lastorderorder: -1order: 13order: $columns + 1.order-*

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

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

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

<div class="container">
  <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

<div class="container">
  <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

<div class="container">
  <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>

ማርጅን ዩቲሊቲታት

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

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

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

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

.ኮል-ኣውቶ .mr-ኣውቶ

.ኮል-ኣውቶ

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

ምድቃል

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

ደረጃ 1፡ .col-sm-9

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .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: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

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

ሚክሲን ምስ ተለዋዋጢ ሽቦ ተተሓሒዙ ንውልቀ ዓምድታት ሽቦ ትርጉማዊ 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();
@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: 30px !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, ወይ %) ምቕማጥካ ኣረጋግጽ ።