መሰባበር ነጥቦች

Breakpoints የሚበጁ ስፋቶች ናቸው የእርስዎ ምላሽ ሰጪ አቀማመጥ በBootstrap ውስጥ ባሉ መሳሪያዎች ወይም የመመልከቻ መጠኖች ላይ እንዴት እንደሚታይ የሚወስኑ።

በዚህ ገጽ ላይ

ዋና ጽንሰ-ሐሳቦች

Breakpoints ምላሽ ሰጪ ዲዛይን ህንጻዎች ናቸው። አቀማመጥዎ በተወሰነ መመልከቻ ወይም የመሳሪያ መጠን ላይ ሲስተካከል ለመቆጣጠር ይጠቀሙባቸው።
የእርስዎን CSS በብልሽት ነጥብ ለመቅረጽ የሚዲያ መጠይቆችን ይጠቀሙ። የሚዲያ መጠይቆች በአሳሽ እና በስርዓተ ክወና ልኬቶች ስብስብ ላይ ተመስርተው ቅጦችን በቅድመ ሁኔታ እንዲተገበሩ የሚያስችልዎ የCSS ባህሪ ነው። በብዛት የምንጠቀመው min-widthየሚዲያ መጠይቆችን ነው።
ሞባይል መጀመሪያ፣ ምላሽ ሰጪ ንድፍ ግቡ ነው። የቡትስትራፕ ሲኤስኤስ አቀማመጡ በትንሹ መግቻ ነጥብ ላይ እንዲሰራ እና ያንን ዲዛይን ለትላልቅ መሳሪያዎች ለማስተካከል በቅጦች ላይ ለመደርደር ዝቅተኛውን ዝቅተኛ ቅጦችን ለመተግበር ያለመ ነው። ይህ የእርስዎን ሲኤስኤስ ያመቻቻል፣ የመስጠት ጊዜን ያሻሽላል እና ለጎብኚዎችዎ ጥሩ ተሞክሮ ይሰጣል።

የሚገኙ መግቻ ነጥቦች

ቡትስትራፕ ምላሽ ለመስጠት ስድስት ነባሪ መግቻ ነጥቦችን ያካትታል፣ አንዳንድ ጊዜ እንደ ፍርግርግ ደረጃዎች ይባላሉ ። ምንጫችን Sass ፋይሎችን እየተጠቀሙ ከሆነ እነዚህ መግቻ ነጥቦች ሊበጁ ይችላሉ።

መግቻ ነጥብ	ክፍል infix	መጠኖች
ኤክስ-ትንሽ	ምንም	<576 ፒክስል
ትንሽ	`sm`	≥576 ፒክስል
መካከለኛ	`md`	≥768 ፒክስል
ትልቅ	`lg`	≥992 ፒክስል
በጣም ትልቅ	`xl`	≥1200 ፒክስል
ከመጠን በላይ ትልቅ	`xxl`	≥1400 ፒክስል

እያንዳንዱ መግቻ ነጥብ ስፋታቸው 12 ብዜቶች የሆኑ መያዣዎችን በምቾት እንዲይዝ ተመርጧል። መግቻ ነጥቦች የጋራ የመሳሪያ መጠኖች እና የእይታ ልኬቶች ንዑስ ስብስብን ይወክላሉ - እነሱ በተለይ እያንዳንዱን የአጠቃቀም መያዣ ወይም መሳሪያ አላነጣጠሩም። በምትኩ፣ ክልሎቹ ለማንኛውም መሳሪያ ለመገንባት ጠንካራ እና ተከታታይ መሰረት ይሰጣሉ።

እነዚህ መግቻ ነጥቦች በ Sass በኩል ሊበጁ የሚችሉ ናቸው—በእኛ የቅጥ ሉህ ውስጥ በ Sass ካርታ ውስጥ _variables.scssታገኛቸዋለህ።

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

የእኛን የ Sass ካርታዎች እና ተለዋዋጮች እንዴት ማሻሻል እንዳለብን ለበለጠ መረጃ እና ምሳሌዎች፣ እባክዎን የፍርግርግ ዶክመንቴሽን Sass ክፍልን ይመልከቱ ።

የሚዲያ ጥያቄዎች

ቡትስትራፕ በመጀመሪያ ሞባይል እንዲሆን ስለተሰራ፣ ለአቀማመጦቻችን እና ለመገናኛዎቻችን ምክንያታዊ መግቻ ነጥቦችን ለመፍጠር ጥቂት የሚዲያ መጠይቆችን እንጠቀማለን። እነዚህ መግቻ ነጥቦች በአብዛኛው በትንሹ የእይታ ስፋቶች ላይ የተመሰረቱ ናቸው እና እይታው ሲቀየር ኤለመንቶችን እንድናሳድግ ያስችሉናል።

አነስተኛ ስፋት

ቡትስትራፕ በዋናነት የሚከተሉትን የሚዲያ መጠይቅ ክልሎችን ወይም መግቻ ነጥቦችን በምንጫችን Sass ፋይሎች ውስጥ ለአቀማመጫችን፣ ለፍርግርግ ስርዓታችን እና ለክፍላችን ይጠቀማል።

// 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 ድብልቅ ነገሮች በ Sass ተለዋዋጮች ውስጥ የተገለጹትን እሴቶች በመጠቀም በተጠናቀረው CSS ውስጥ ይተረጉማሉ። ለምሳሌ:

// 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 ይቀንሳል? አሳሾች በአሁኑ ጊዜ የክልል አውድ መጠይቆችን አይደግፉም ስለዚህ እኛ የምንሰራው ውስንነት min-እና max-ቅድመ ቅጥያዎችን እና የእይታ ቦታዎችን ከክፍልፋይ ስፋቶች ጋር (ለምሳሌ በአንዳንድ ሁኔታዎች በከፍተኛ ዲፒአይ መሳሪያዎች ላይ ሊከሰት ይችላል) ከፍተኛ ትክክለኛነት ያላቸውን እሴቶች በመጠቀም ነው።

ነጠላ መግቻ ነጥብ

አነስተኛውን እና ከፍተኛውን የመግጫ ነጥብ ስፋቶችን በመጠቀም አንድ ነጠላ የስክሪን መጠኖችን ለማነጣጠር የሚዲያ መጠይቆች እና ድብልቆችም አሉ።

@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) { ... }