Source

ሓፈሻዊ ትሕዝቶ

ንፕሮጀክት ቡትስትራፕካ ንምቕማጥ ዝሕግዙ ባእታታትን ኣማራጺታትን፡ ንኣብነት ምጥቕላል መትሓዚታት፡ ሓያል ስርዓተ ሽቦ፡ ተዓጻጻፊ ናይ ሚድያ ነገራትን ምላሽ ዝህቡ ዩቲሊቲ ክፍልታትን።

ኮንተይነራት

ኮንተይነራት ኣብ ቡትስትራፕ እቲ ዝበለጸ መሰረታዊ ናይ ኣቀማምጣ ባእታ ኮይኑ ነባሪ ስርዓተ ሽቦና ኣብ እንጥቀመሉ እዋን የድልዩ ። ካብ ምላሽ ዝህብ፣ ውሱን ስፍሓት ዘለዎ መትሓዚ ( max-widthኣብ ነፍሲ ወከፍ ነጥቢ ምብታኽ ዝመጽእ ለውጢ ማለት እዩ) ወይ ስፍሓት ፈሳሲ ( 100%ኩሉ ግዜ ገፊሕ ማለት እዩ) ምረጽ።

መትሓዚታት ክሰፍሩ ይኽእሉ እኳ እንተኾኑ ፡ መብዛሕትኦም ኣቀማምጣ ግን ዝተሰፈሩ መትሓዚ ኣየድልዮምን እዩ።

<div class="container">
  <!-- Content here -->
</div>

.container-fluidንሙሉእ ስፍሓት ናይቲ ቪውፖርት ዝሽፍን ምሉእ ስፍሓት ዘለዎ መትሓዚ ተጠቐም ።

<div class="container-fluid">
  ...
</div>

ምላሽ ዝህቡ ነጥብታት ምብታኽ

Bootstrap መጀመርታ ሞባይል ክኸውን ስለዝተማዕበለ ፡ ንኣቀማምጣናን መተሓላለፍትናን ርትዓዊ ዝኾነ ናይ ምብታኽ ነጥብታት ንምፍጣር ብኣጻብዕ ዝቑጸሩ ናይ ሚድያ ሕቶታት ንጥቀም። እዞም ምብታኽ ነጥብታት መብዛሕትኦም ኣብ ዝተሓተ ስፍሓት ቪውፖርት ዝተመርኮሱ ኮይኖም እቲ ቪውፖርት እናተቐየረ ምስ ከደ ባእታታት ክንዓቢ የኽእሉና።

ቡትስትራፕ ብቐንዱ ነዞም ዝስዕቡ ናይ ሚድያ ሕቶ ደረጃታት-ወይ ምብታኽ ነጥብታት-ኣብ ምንጪ ሳስ ፋይላትና ንኣቀማምጣና፡ ስርዓተ-ሽቦናን ኣካላትናን ይጥቀም።

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

ምንጪ CSSና ብ Sass ስለ እንጽሕፍ፡ ኩሉ ናይ ሚድያ ሕቶታትና ብመንገዲ Sass mixins ይርከብ፤

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

ሓሓሊፍና ናብቲ ካልእ ኣንፈት ዝኸዱ ናይ ሚድያ ሕቶታት ንጥቀም (እቲ ዝተዋህበ ዓቐን ስክሪን ወይ ካብኡ ዝነኣሰ ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

ኣስተውዕል ኣብዚ እዋን እዚ ዳህሰስቲ ን range context queries ስለዘይድግፉ ፣ ነዞም ንጽጽር ዝለዓለ ትኽክለኛነት ዘለዎም ክብርታት ብምጥቃም ንደረት min-ናይን max-ቅድመ-ጥብቆታትን ክፋላዊ ስፍሓት ዘለዎም ቪውፖርትን (ንኣብነት ኣብ ትሕቲ ዝተወሰነ ኩነታት ኣብ ልዑል-dpi መሳርሒታት ከጋጥም ዝኽእል) ንሰርሕ .

ሕጂ ውን እዞም ናይ ሚድያ ሕቶታት ብመንገዲ Sass mixins እውን ይርከቡ፤

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

ብተወሳኺ ንሓደ ክፋል ናይ ስክሪን ዓቐናት ዕላማ ንምግባር ዝወሓደን ዝለዓለን ስፍሓት ነጥቢ ምብታኽ ብምጥቃም ናይ ሚድያ ሕቶታትን ሚክሲንን ኣለዉ።

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

እዞም ናይ ሚድያ ሕቶታት ብመንገዲ Sass mixins እውን ይርከቡ፤

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

ብተመሳሳሊ፡ ሕቶታት ሚድያ ብዙሕ ስፍሓት ነጥብታት ምብታኽ ክሽፍኑ ይኽእሉ እዮም፤

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

እቲ ንሓደ ዓይነት ናይ ስክሪን ዓቐን ደረጃ ዕላማ ንምግባር ዝሕግዝ ናይ Sass mixin ከምዚ ዝስዕብ ምኾነ፤

@include media-breakpoint-between(md, xl) { ... }

ዜድ-ኢንዴክስ

ሓያሎ Bootstrap components utilize z-index, ትሕዝቶ ንምስራዕ ሳልሳይ ኣክሲስ ብምሃብ ንኣቀማምጣ ንምቁጽጻር ዝሕግዝ CSS ባህሪ። ኣብ ቡትስትራፕ ንዘሎ ነባሪ z-index ስኬል ንጥቀም እዚ ድማ ንመገሻ፣ መሳርሒታትን ፖፖቨርን፣ ሞዳላትን ካልእን ብግቡእ ንጣር ንምግባር ዝተዳለወ እዩ።

እዞም ዝለዓለ ክብርታት ካብ ፍቓደኛ ቁጽሪ ይጅምሩ፣ ልዑልን ፍሉይን ብዝበለጸ ካብ ግርጭታት ንምውጋድ እኹል እዩ። ኣብ መላእ ንጣር ዘለዎም ባእታታትና ደረጃ ዘለዎ ስብስብ ናይዚኦም የድልየና እዩ-መሳርሒታት፣ ፖፖቨርስ፣ ናቭባር፣ ድሮፕዳውንድስ፣ ሞዳላት-ስለዚ ኣብቲ ባህርያት ብመጠኑ ቅኑዕ ክንከውን ንኽእል። 100+ ወይ + ክንጥቀም ዘይንኽእለሉ ዝነበረ ምኽንያት የለን 500

ነዞም ውልቀ ክብርታት ምምዕርራይ ኣይነተባብዕን ኢና፤ ሓደ ክትቅይሮም እንተ ዄንካ፡ ንዅሎም ክትቅይሮም ዜድልየካ ምዃኑ ኣይተርፍን እዩ።

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

ኣብ ውሽጢ ኣካላት ንዝተደራረቡ ዶባት ንምሕላው (ንኣብነት፡ መጠወቒታትን እታዎታትን ኣብ ጉጅለታት ምእታው)፡ ትሑት ንጽል ኣሃዝ z-indexክብርታት ናይ 1, 2, ከምኡ’ውን 3ንነባሪ፡ ሆቨርን ንጡፍ ኩነታትን ንጥቀም። ኣብ hover/focus/active ንሓደ ፍሉይ ባእታ ዝለዓለ ዋጋ ዘለዎ ናብ ቅድሚት ኣምጺእና z-indexዶቦም ኣብ ልዕሊ እቶም ኣሕዋት ባእታታት ንርኢ።