ኮንተይነራት

ኮንተይነራት መሰረታዊ ህንጻዊ ብሎክ ናይ Bootstrap ኮይኖም ትሕዝቶኻ ኣብ ውሽጢ ዝተዋህበ መሳርሒ ወይ ቪውፖርት ዝሓዙ፣ ፓድ፣ ከምኡ’ውን ዘሰናድኡ እዮም።

ኣብዚ ገጽ

ከመይ ይሰርሑ

ኮንተይነራት ኣብ ቡትስትራፕ እቲ ዝበለጸ መሰረታዊ ናይ ኣቀማምጣ ባእታ ኮይኑ ነባሪ ስርዓተ ሽቦና ኣብ እንጥቀመሉ እዋን የድልዩ ። መትሓዚታት ነቲ ትሕዝቶ ኣብ ውሽጦም ንምሓዝ፣ ንምዕሻግን (ሓድሓደ ግዜ) ንምምእካርን ይጥቀሙ። መትሓዚታት ክሰፍሩ ይኽእሉ እኳ እንተኾኑ ፡ መብዛሕትኦም ኣቀማምጣ ግን ዝተሰፈሩ መትሓዚ ኣየድልዮምን እዩ።

ቡትስትራፕ ምስ ሰለስተ ዝተፈላለዩ ኮንተይነራት ይመጽእ፤

.containermax-width፣ እዚ ድማ ኣብ ነፍሲ ወከፍ ምላሽ ዝህብ ነጥቢ ምብታኽ a የቐምጥ
.container-{breakpoint}፣ እዚ ድማ width: 100%ክሳብ እቲ ዝተወሰነ ነጥቢ ምብታኽ እዩ።
.container-fluid፣ እዚ ድማ width: 100%ኣብ ኩሉ ነጥብታት ምብታኽ እዩ።

ኣብ ታሕቲ ዘሎ ሰሌዳ ነፍሲ ወከፍ ኮንተይነር max-widthምስቲ ኦሪጅናልን .containerኣብ .container-fluidስግር ነፍሲ ወከፍ ነጥቢ ምብታኽን ብኸመይ ከም ዝወዳደር ዘርኢ እዩ።

ብተግባር ርኣዮም እሞ ኣብቲ ናይ ግሪድ ኣብነትና ኣነጻጽሮም ።

	ተወሳኺ ንእሽቶ <576px ዝብል እዩ።	ንኡስ ≥576px ዝብል እዩ።	ማእኸላይ ≥768px ዝብል እዩ።	ገዚፍ ≥992px ዝብል እዩ።	ኤክስ-ዓቢ ≥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፡ ክሳብ ኣብቲ ናይ smምብታኽ ነጥቢ ዝበጽሕ ክትጅምር 100% ስፍሓት ኣለዎ፡ ኣብኡ ድማ ብ 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();
}

ንተወሳኺ ሓበሬታን ኣብነታትን ብዛዕባ ከመይ ጌርና ናይ ሳስ ካርታታትናን ተለዋዋጢ ረቛሒታትናን ንቕይር፡ በጃኹም ኣብ ክፍሊ ሳስ ናይ ግሪድ ሰነድ ተወከሱ ።