ስርዓት ሽቦ
ሳላ ዓሰርተው ክልተ ዓምድታት ስርዓት፣ ሽዱሽተ ነባሪ ምላሽ ዝህቡ ደረጃታት፣ Sass ተለዋዋጢን ሚክሲንን፣ ከምኡ’ውን ዓሰርተታት ኣቐዲሞም ዝተነጸሩ ክፍልታትን ናይ ኩሉ ቅርጽታትን ዓቐንን ኣቀማምጣታት ንምህናጽ ሓያል ሞባይል-ቀዳማይ ፍሌክስቦክስ ሽቦና ተጠቐም።
ኣብነት
ናይ ቡትስትራፕ ስርዓተ ሽቦ ንትሕዝቶ ንምቕማጥን ንምስምማዕን ተኸታተልቲ መትሓዚታት፡ መስመራትን ዓምድታትን ይጥቀም። ብ 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
ይምልከት )። እዚ ማለት ብነፍሲ ወከፍ ነጥቢ ምብታኽ ንዓቐንን ባህርን ኮንተይነርን ዓምድን ክትቆጻጸሮ ትኽእል ኢኻ።sm
md
lg
xl
xxl
-
ኮንተይነራት ማእከልን ብኣግማድ ንትሕዝቶኻ ምዕሻግን።
.container
ንሓደ ምላሽ ዝህ��� ስፍሓት ፒክሰል ተጠቐም ፣.container-fluid
ንwidth: 100%
ኣብ መላእ ኩሎም ርእይቶታትን መሳርሕታትን፣ ወይ መልሲ ዝህብ መትሓዚ (ንኣብነት፣.container-md
) ንውህደት ፈሳስን ስፍሓት ፒክሰልን ተጠቐም። -
መስመራት ንዓምድታት ዝኸውን መጠቕለሊ እዮም። ነፍሲ ወከፍ ዓምዲ
padding
ኣብ መንጎኦም ዘሎ ቦታ ዝቆጻጸር ኣግማድ (ጉተር ዝበሃል) ኣለዎ። እዚpadding
ድሕሪኡ ኣብቶም ኣሉታዊ ወሰን ዘለዎም መስመራት ይቃወም እሞ እቲ ኣብ ዓምድታትካ ዘሎ ትሕዝቶ ብዓይኒ ብጸጋማይ ሸነኽ ንታሕቲ ተሰሪዑ ከምዘሎ የረጋግጽ። መስመራት ብተወሳኺ ንዓምዲ ምዕባይ ብሓደ ዓይነት መንገዲ ንምትግባር ናይ መቐየሪ ክፍልታት ይድግፉን ናይ ትሕዝቶኻ ርሕቀት ንምቕያር ናይ ጓተር ክፍልታትን ይድግፉ። -
ዓምድታት ንምእማኑ ዘጸግም ተዓጻጻፍነት ኣለዎም። ኣብ ነፍሲ ወከፍ መስርዕ 12 ናይ ቅጥዒ ዓምድታት ኣለዉ፣ እዚ ድማ ዝኾነ ቁጽሪ ዓምድታት ዝሽፍን ዝተፈላለየ ውህደት ባእታታት ክትፈጥር የኽእለካ። ናይ ዓምዲ ክፍልታት ብዝሒ ናይ ቅጥዒ ዓምድታት ክሽፍኑ ይሕብሩ (ንኣብነት
col-4
፡ ስፓን ኣርባዕተ)።width
s ብሚእታዊት ስለዝተቐመጡ ኩሉ ግዜ ሓደ ዓይነት ኣንጻራዊ ዓቐን ኣለካ። -
ጓተር እውን ምላሽ ዝህቡን ብዓይነት ዝቕየሩን እዮም። ናይ ጓተር ክፍልታት ኣብ ኩሉ ናይ ምብታኽ ነጥብታት ይርከቡ፣ ኩሎም ሓደ ዓይነት ዓቐን ምስ ናትና ወሰንን ናይ መሸፈኒ ርሕቀትን . ንኣግማድ ጐዳጉዲ ምስ
.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
። ንነፍሲ ወከፍ ዘድልየካ ነጥቢ ምብታኽ ዝኾነ ቁጽሪ ኣሃዱ ዘይብሎም ክፍልታት ወስኹ እሞ ነፍሲ ወከፍ ዓምዲ ሓደ ዓይነት ስፍሓት ክህልዎ እዩ።
<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>
ስፍሓት ሓደ ዓምዲ ምቕማጥ
ኣውቶ-ኣቀማምጣ ንፍሌክስቦክስ ግሪድ ዓምድታት እውን ስፍሓት ናይ ሓደ ዓምዲ ከተቐምጥን እቶም ኣሕዋት ዓምድታት ብኣውቶማቲክ ኣብ ዙርያኡ ዓቐኖም ክቕይሩን ትኽእል ማለት እዩ። ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት (ከምቲ ኣብ ታሕቲ ተገሊጹ ዘሎ)፡ ናይ ሽቦ ምትሕውዋሳት፡ ወይ ናይ ውሽጢ መስመር ስፍሓት ክትጥቀም ትኽእል ኢኻ። እቶም ካልኦት ዓምድታት ስፍሓት ናይቲ ማእከላይ ዓምዲ ብዘየገድስ ዓቐን ከም ዝቕይሩ ኣስተውዕል።
<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
ዓምድታት ኣብ ተፈጥሮኣዊ ስፍሓት ትሕዝቶኦም ተመርኲስካ ንምዕባይ ክፍልታት ተጠቐም ።
<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
.
<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
<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>
ምትሕውዋስን ምትሕውዋስን
ዓምድታትካ ኣብ ገለ ደረጃታት ሽቦ ጥራይ ክድምር ኣይትደልን ዲኻ? ከም ኣድላይነቱ ንነፍሲ ወከፍ ደረጃ ዝተፈላለዩ ክፍልታት ውህደት ተጠቐም። ኩሉ ብኸመይ ከም ዝሰርሕ ዝሓሸ ሓሳብ ንምርካብ ኣብ ታሕቲ ዘሎ ኣብነት ርአ።
<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-*
<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-breakpoints
and $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
, ወይ %
) ምቕማጥካ ኣረጋግጽ ።