Kariyɔrɔw

Hakilina jɔnjɔnw

• Breakpoints ye jaabi dilancogo jɔli fɛnw ye. Baara kɛ n’u ye walasa k’a kɔlɔsi tuma min na i ka layidu bɛ se ka ladilan filɛlikɛyɔrɔ kɛrɛnkɛrɛnnen dɔ la walima minɛn hakɛ dɔ la.

• Baara kɛ ni kunnafonidilanw ɲininkaliw ye walasa k’i ka CSS labɛn ka kɛɲɛ ni breakpoint ye. Media ɲininkaliw ye CSS ka fɛɛrɛ ye min b’a to i bɛ se ka cogoyaw waleya cogo la min sinsinnen bɛ navigatɛri ni operasɔn sitɛmu paramɛtiriw kulu dɔ kan. An bɛ baara Kɛ ni min-widthmin ye kosɛbɛ an ka kunnafonidilanw ɲininkaliw la.

• Mobile fɔlɔ, jaabi dilancogo ye laɲini ye. Bootstrap ka CSS laɲini ye ka bare minimum of styles (daɲɛw) kɛ walasa ka layout (layidu) dɔ Kɛ ka baara Kɛ breakpoint (kalan) fitinin na, ka sɔrɔ ka layers (layi) Kɛ styles (daɲɛw) kan walasa k’o design (fɔcogo) ladilan minɛn belebelebaw kama. O bɛ i ka CSS kɛcogo ɲɛ, ka ɲɛjirali waati ɲɛ, ka fɛnba di i ka taamakɛlaw ma.

Kariyɔrɔw bɛ sɔrɔ

Bootstrap bɛ ni default breakpoint wɔɔrɔ ye, tuma dɔw la a bɛ fɔ u ma ko grid tiers , walasa ka jɔ jaabi la. O breakpoints bɛ Se ka Labɛn ni i bɛ baara Kɛ ni an ka source Sass files ye.

Kariyɔrɔ kelen-kelen bɛɛ sugandira walasa ka minɛnw minɛ lafiya la minnu bonya ye 12 caman ye.Kariyɔrɔw fana ye minɛnw hakɛw ni filɛlikɛyɔrɔw hakɛw kulu fitinin dɔ jirali ye—u tɛ baarakɛcogo walima minɛn bɛɛ laɲini kɛrɛnkɛrɛnnenya la. O nɔ na, ​​o fɛnɲɛnɛmaw bɛ jusigilan barikama ni basigilen di walasa ka jɔ a kan minɛn suguya bɛɛ lajɛlen na.

O breakpoints bɛ se ka ladilan Sass fɛ—i bɛna u sɔrɔ Sass karti dɔ kɔnɔ an ka _variables.scssstylesheet kɔnɔ.

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

Walasa ka kunnafoni wɛrɛw sɔrɔ ani misaliw an ka Sass kartiw ni fɛn caman sɛmɛntiyacogo kan, aw bɛ Sass yɔrɔ lajɛ Grid sɛbɛnw kɔnɔ .

Kunnafonidila ɲininkaliw

Komin Bootstrap Dabɔra ka Kɛ mobili ye fɔlɔ, an bɛ baara Kɛ ni kunnafonidilanw ɲininkali damadɔ ye walasa ka dakun hakilitigiw Dabɔ an ka labɛnw ni ɲɔgɔn cɛ. O kari-yɔrɔw fanba bɛ Dabɔ filɛli-yɔrɔ bonya fitininw kan wa u b’a To an bɛ se ka fɛnw Sànsan ni filɛli-yɔrɔ bɛ Yɛlɛma.

Min-bonya

Bootstrap bɛ baara kɛ fɔlɔ ni nin kunnafonidilanw ɲininkaliw ye—walima kariyɔrɔw—an ka sɔrɔyɔrɔ Sass filenw kɔnɔ an ka labɛncogo, grid system ani a yɔrɔw kama.

// 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;
  }
}

O Sass mixins bɛ baara Kɛ an ka CSS lajɛlen kɔnɔ ni nafaw ye minnu Fɔra an ka Sass variables kɔnɔ. I n'a fo:

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

Max-bonya

An bɛ baara kɛ ni kunnafonidilanw ɲininkaliw ye tuma dɔw la minnu bɛ taa sira wɛrɛ fɛ (ɛkran hakɛ dilen walima a fitinin ):

// 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;
  }
}

O mixin ninnu bɛ o breakpoints (kari) minnu fɔra, olu ta, ka .02pxbɔ u la, ka baara kɛ n’u ye i n’a fɔ an ka max-widthnafaw. I n'a fo:

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

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

Kariyɔrɔ kelen

Media ɲininkaliw ni mixins fana bɛ yen walasa ka ekran hakɛw tilayɔrɔba kelen laɲini ni kariyɔrɔ bonya fitinin ni bonya ye.

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

Misali la, a @include media-breakpoint-only(md) { ... }bɛna kɛ sababu ye ka :

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

Kariyɔrɔw ni ɲɔgɔn cɛ

O cogo kelen na, kunnafonidilanw ɲininkaliw bɛ se ka kɛ kariyɔrɔ caman bonya:

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

Min bɛ na ni ninnu ye:

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