Ama-breakpoints

Imiqondo eyinhloko

• Ama-breakpoint ayizingqimba zokwakha zedizayini ephendulayo. Zisebenzise ukuze ulawule ukuthi isakhiwo sakho singashintshwa nini endaweni ethile yokubuka noma usayizi wedivayisi.

• Sebenzisa imibuzo yemidiya ukuze wakhe i-CSS yakho nge-breakpoint. Imibuzo yemidiya iyisici se-CSS esikuvumela ukuthi usebenzise izitayela ngokwemibandela ngokusekelwe kusethi yesiphequluli namapharamitha wesistimu yokusebenza. Sivame ukusebenzisa emibuzweni min-widthyethu yemidiya.

• Iselula kuqala, idizayini ephendulayo iwumgomo. I-Bootstrap's CSS ihlose ukusebenzisa ubuncane obuncane bezitayela ukwenza isakhiwo sisebenze endaweni encane yokuhlukana, bese kufakwa izingqimba zezitayela ukulungisa lowo mklamo kumadivayisi amakhulu. Lokhu kuthuthukisa i-CSS yakho, kuthuthukisa isikhathi sokunikezela, futhi kunikeza izivakashi zakho umuzwa omuhle kakhulu.

Ama-breakpoint atholakalayo

I-Bootstrap ihlanganisa ama-breakpoint ayisithupha azenzakalelayo, kwesinye isikhathi abizwa ngokuthi ama- grid tiers , ukwakha ngokusabela. Lawa ma-breakpoint angenziwa ngendlela oyifisayo uma usebenzisa umthombo wethu wamafayela e-Sass.

Indawo ngayinye yokuphumula ikhethwe ukuze ibambe kahle iziqukathi ezinobubanzi obuphindaphindeka ngo-12. Ama-Breakpoints futhi amele isethi encane yosayizi bedivayisi abavamile nobukhulu bembobo yokubuka—ayiqondi ngokuqondile yonke ikesi yokusetshenziswa noma idivayisi. Kunalokho, ububanzi buhlinzeka ngesisekelo esiqinile nesiguquguqukayo esingakhelwa kuso cishe kunoma iyiphi idivayisi.

Lawa ma-breakpoint enziwa ngendlela oyifisayo nge-Sass—uzowathola kumephu ye-Sass ekhasini lethu _variables.scsslesitayela.

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

Ukuze uthole ulwazi olwengeziwe nezibonelo zokuthi ungawashintsha kanjani amamephu wethu we-Sass nokuguquguqukayo, sicela ubheke ingxenye ye-Sass yemibhalo Yegridi .

Imibuzo yemidiya

Njengoba i-Bootstrap ithuthukiswe ukuthi ibe yiselula kuqala, sisebenzisa imibuzo embalwa yemidiya ukuze sakhe izindawo zokunqamuka ezinengqondo zezakhiwo zethu nezixhumi ezibonakalayo. Lawa maphoyinti okunqamuka kakhulu asekelwe kububanzi obuncane bembobo yokubuka futhi asivumela ukuba sikhulise izici njengoba imbobo yokubuka ishintsha.

Ububanzi obuncane

I-Bootstrap ngokuyinhloko isebenzisa ububanzi bemibuzo yemidiya elandelayo—noma ama-breakpoint—kumafayela wethu we-Sass ongumthombo wesakhiwo sethu, isistimu yegridi, nezingxenye.

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

Lezi zixube ze-Sass zihumusha ku-CSS yethu ehlanganisiwe kusetshenziswa amanani ashiwo kokuguquguqukayo kwethu kwe-Sass. Ngokwesibonelo:

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

Ububanzi obukhulu

Ngezinye izikhathi sisebenzisa imibuzo yemidiya eya ngakolunye uhlangothi (usayizi wesikrini onikeziwe noma omncane ):

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

Lezi zingxube zithatha lezo zindawo zokunqamuka ezishiwo, zisuse .02pxkuzo, futhi zisebenzise njengamagugu ethu max-width. Ngokwesibonelo:

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

I-breakpoint eyodwa

Kukhona nemibuzo yemidiya kanye nezingxube zokukhomba ingxenye eyodwa yamasayizi wesikrini kusetshenziswa ubuncane kanye nobubanzi be-breakpoint.

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

Isibonelo, @include media-breakpoint-only(md) { ... }kuzophumela kokuthi:

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

Phakathi kwama-breakpoints

Ngokufanayo, imibuzo yemidiya ingase idlulele kububanzi be-breakpoint multiple:

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

Okuphumela kokuthi:

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