ኮንተይነራት
ኮንተይነራት መሰረታዊ ህንጻዊ ብሎክ ናይ Bootstrap ኮይኖም ትሕዝቶኻ ኣብ ውሽጢ ዝተዋህበ መሳርሒ ወይ ቪውፖርት ዝሓዙ፣ ፓድ፣ ከምኡ’ውን ዘሰናድኡ እዮም።
ከመይ ይሰርሑ
ኮንተይነራት ኣብ ቡትስትራፕ እቲ ዝበለጸ መሰረታዊ ናይ ኣቀማምጣ ባእታ ኮይኑ ነባሪ ስርዓተ ሽቦና ኣብ እንጥቀመሉ እዋን የድልዩ ። መትሓዚታት ነቲ ትሕዝቶ ኣብ ውሽጦም ንምሓዝ፣ ንምዕሻግን (ሓድሓደ ግዜ) ንምምእካርን ይጥቀሙ። መትሓዚታት ክሰፍሩ ይኽእሉ እኳ እንተኾኑ ፡ መብዛሕትኦም ኣቀማምጣ ግን ዝተሰፈሩ መትሓዚ ኣየድልዮምን እዩ።
ቡትስትራፕ ምስ ሰለስተ ዝተፈላለዩ ኮንተይነራት ይመጽእ፤
.container
max-width
፣ እዚ ድማ ኣብ ነፍሲ ወከፍ ምላሽ ዝህብ ነጥቢ ምብታኽ a የቐምጥ.container-fluid
፣ እዚ ድማwidth: 100%
ኣብ ኩሉ ነጥብታት ምብታኽ እዩ።.container-{breakpoint}
፣ እዚ ድማwidth: 100%
ክሳብ እቲ ዝተወሰነ ነጥቢ ምብታኽ እዩ።
ኣብ ታሕቲ ዘሎ ሰሌዳ ነፍሲ ወከፍ ኮንተይነር max-width
ምስቲ ኦሪጅናልን .container
ኣብ .container-fluid
ስግር ነፍሲ ወከፍ ነጥቢ ምብታኽን ብኸመይ ከም ዝወዳደር ዘርኢ እዩ።
ብተግባር ርኣዮም እሞ ኣብቲ ናይ ግሪድ ኣብነትና ኣነጻጽሮም ።
ተወሳኺ ንእሽቶ <576px |
ንእሽቶ ≥576px |
ማእከላይ ≥768px |
ዓቢ ≥992px |
X-ዓቢ ≥1200px እዩ። |
XX- ዓቢ ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px ዝብል እዩ። | 720px ዝብል እዩ። | 960px ዝብል እዩ። | 1140px ዝብል እዩ። | 1320px ዝብል እዩ። |
.container-sm |
100% | 540px ዝብል እዩ። | 720px ዝብል እዩ። | 960px ዝብል እዩ። | 1140px ዝብል እዩ። | 1320px ዝብል እዩ። |
.container-md |
100% | 100% | 720px ዝብል እዩ። | 960px ዝብል እዩ። | 1140px ዝብል እዩ። | 1320px ዝብል እዩ። |
.container-lg |
100% | 100% | 100% | 960px ዝብል እዩ። | 1140px ዝብል እዩ። | 1320px ዝብል እዩ። |
.container-xl |
100% | 100% | 100% | 100% | 1140px ዝብል እዩ። | 1320px ዝብል እዩ። |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px ዝብል እዩ። |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
ነባሪ መትሓዚ
ነባሪ .container
ክፍልና ምላሽ ዝህብ፣ ውሱን ስፍሓት ዘለዎ መትሓዚ እዩ፣ ማለት max-width
ኣብ ነፍሲ ወከፍ ነጥቢ ምብታኽ ዝገብሮ ለውጢ ማለት እዩ።
<div class="container">
<!-- Content here -->
</div>
ምላሽ ዝህቡ መትሓዚታት
ምላሽ ዝህቡ መትሓዚታት ክሳብ እቲ ዝተወሰነ ነጥቢ ምብታኽ ዝበጽሕ 100% ስፍሓት ዘለዎ ክፍሊ ክትገልጽ የኽእሉኻ፣ ድሕሪኡ max-width
ንነፍሲ ወከፍ ካብቶም ዝለዓሉ ነጥብታት s ንጥቀመሉ። ንኣብነት .container-sm
፡ ክሳብ እቲ ነጥቢ ምብታኽ ዝበጽሕ ንኽጅምር 100% ስፍሓት ኣለዎ sm
፡ ኣብኡ ድማ ብ md
, lg
, xl
, ከምኡ’ውን ክዓቢ እዩ xxl
።
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
ፈሳሲ ዝኾኑ መትሓዚታት
.container-fluid
ንሙሉእ ስፍሓት ናይቲ ቪውፖርት ዝሽፍን ምሉእ ስፍሓት ዘለዎ መትሓዚ ተጠቐም ።
<div class="container-fluid">
...
</div>
ሳስ
ከምቲ ኣብ ላዕሊ ዝተገልጸ፡ ቡትስትራፕ ንዝደለኻዮ ኣቀማምጣ ንምህናጽ ዝሕግዙኻ ተኸታታሊ ኣቐዲሞም ዝተነጸሩ ናይ መትሓዚ ክፍልታት የፍሪ። _variables.scss
ነዞም ኣቐዲሞም ዝተነጸሩ ናይ መትሓዚ ክፍልታት ነቲ ሓይሊ ዝህቦም ካርታ ሳስ (ኣብ ዝተረኽበ) ብምቕያር ክትጥዕሞም ትኽእል ኢኻ ፤
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
ብዘይካ ንሳስ ምምዕርራይ፡ ብናይ Sass mixin ናታትና ናይ ገዛእ ርእስኹም ኮንተይነራት ክትፈጥሩ ትኽእሉ ኢኹም።
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
ንተወሳኺ ሓበሬታን ኣብነታትን ብዛዕባ ከመይ ጌርና ናይ ሳስ ካርታታትናን ተለዋዋጢ ረቛሒታትናን ንቕይር፡ በጃኹም ኣብ ክፍሊ ሳስ ናይ ግሪድ ሰነድ ተወከሱ ።