ነጥብታት ምብታኽ

ነጥብታት ምብታኽ ኣብ ቡትስትራፕ ኣብ መላእ ዓቐናት መሳርሒ ወይ ቪውፖርት ናትካ ምላሽ ዝህብ ኣቀማምጣ ከመይ ከም ዝመላለስ ዝውስኑ ንዓኻ ዝምጥን ስፍሓት እዮም።

ኣብዚ ገጽ

ቀንዲ ኣምር

ነጥብታት ምብታኽ ናይ ምላሽ ዝህብ ዲዛይን ህንጻዊ ብሎኮታት እዮም። ኣቀማምጣኻ ኣብ ሓደ ፍሉይ ቪውፖርት ወይ ዓቐን መሳርሒ መዓስ ክመዓራረ ከም ዝኽእል ንምቁጽጻር ተጠቐመሎም።
ንሲኤስኤስካ ብነጥቢ ምብታኽ ንምህናጽ ናይ ሚድያ ሕቶታት ተጠቐም። ሚድያ ሕቶታት ኣብ ስብስብ መለክዒታት መርበብ ሓበሬታን ስርዓተ ምምሕዳርን ዝተመርኮሰ ቅዲታት ብኹነታት ክትትግብር ዘኽእለካ ባህሪ ናይ CSS እዩ። min-widthኣብ ናይ ሚድያ ሕቶታትና ዝበዝሕ ግዜ ንጥቀመሉ ።
ሞባይል መጀመርታ፡ ምላሽ ዝህብ ዲዛይን ዕላማ እዩ። Bootstrap’s CSS ንሓደ ኣቀማምጣ ኣብቲ ዝነኣሰ ምብታኽ ንኽሰርሕ ነቲ ንእሽቶ ቅዲታት ንምትግባር ዝዓለመ ኮይኑ፡ ድሕሪኡ ኣብ ቅዲታት ንጣር ብምግባር ነቲ ዲዛይን ንዓበይቲ መሳርሒታት ንምትዕርራይ ዝዓለመ እዩ። እዚ ንሲኤስኤስካ የመሓይሾ፣ ናይ ምቕራጽ ግዜ የመሓይሽ፣ ንበጻሕትኻ ድማ ዓቢ ተመክሮ ይህብ።

ዝርከቡ ናይ ምብታኽ ነጥብታት

ቡትስትራፕ ሽዱሽተ ነባሪ ነጥብታት ምብታኽ የጠቓልል፣ ሓደ ሓደ ግዜ ብግሪድ ደረጃታት ይጽውዑ ፣ ንመልሲ ንምህናጽ። እዞም ናይ ምብታኽ ነጥብታት ምንጪ ሳስ ፋይላትና ትጥቀሙ እንተኾይንኩም ክትመዓራረዩ ትኽእሉ ኢኹም።

ነጥቢ ምብታኽ	ክፍሊ ምትዕርራይ	መለክዒታት
ተወሳኺ ንእሽቶ	ዋላ ሓደ	<576px ዝብል እዩ።
ንኡስ	`sm`	≥576px ዝብል እዩ።
ማእኸላይ	`md`	≥768px ዝብል እዩ።
ገዚፍ	`lg`	≥992px ዝብል እዩ።
ተወሳኺ ዓቢ	`xl`	≥1200px ዝብል እዩ።
ተወሳኺ ተወሳኺ ዓቢ	`xxl`	≥1400px ዝብል እዩ።

ነፍሲ ወከፍ ነጥቢ ምብታኽ ስፍሓቶም ዕጽፊ 12 ዝኾኑ መትሓዚታት ብዝጥዕም መንገዲ ንምሓዝ ተመሪጹ።ነጥብታት ምብታኽ ንሓደ ንኡስ ስብስብ ናይ ሓባራዊ ዓቐን መሳርሒታትን መለክዒታት ምርኣይን እውን ዝውክሉ እዮም-ንነፍሲ ወከፍ ኣጠቓቕማ ወይ መሳርሒ ብፍሉይ ዒላማ ኣይኮኑን። ኣብ ክንድኡስ፡ እቶም ሬንጅታት ዳርጋ ንዝኾነ መሳርሒ ንምህናጽ ድልዱልን ቅኑዕን መሰረት ይህቡ።

_variables.scssእዞም ነጥብታት ምብታኽ ብመንገዲ ሳስ ንዓኻ ዝምጥን እዮም-ኣብ ቅዲ ጽሑፍና ኣብ ካርታ ሳስ ክትረኽቦም ኢኻ ።

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

ናይ ሚድያ ሕቶታት

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

ደቒቕ ስፍሓት

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

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

እዞም Sass mixins ኣብቲ ዝተጠርነፈ CSSና ኣብ Sass variables ናትና ዝተኣወጁ ክብርታት ተጠቒሞም ይትርጉሙ። ንኣብነት:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` 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) { ... }

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

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

ማክስ-ስፍሓት

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

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

እዞም ሚክሲናት ነቶም ዝተኣወጁ ናይ ምብታኽ ነጥብታት ወሲዶም .02pxካብኦም ኣጉዲሎም ከም max-widthክብርታትና ይጥቀሙሎም። ንኣብነት:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

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

ንጽል ነጥቢ ምብታኽ

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

@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) { ... }
@include media-breakpoint-only(xxl) { ... }

ንኣብነት እቲ @include media-breakpoint-only(md) { ... }ድሌት ውጽኢቱ :

@media (min-width: 768px) and (max-width: 991.98px) { ... }

ኣብ መንጎ ነጥብታት ምብታኽ

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

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

ውጽኢቱ ድማ፤

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