Breakpoints

Têgehên bingehîn

• Xalên veqetandinê blokên avakirina sêwirana bersivdar in. Wan bikar bînin da ku kontrol bikin ka kengê sêwirana we dikare li dîmenderek taybetî an mezinahiya cîhazê were adapte kirin.

• Pirsên medyayê bikar bînin da ku CSS-ya xwe bi xala veqetandinê ava bikin. Pirsên medyayê taybetmendiyek CSS-ê ye ku dihêle hûn şêwazên bi şert li ser bingeha komek gerok û pîvanên pergala xebitandinê bicîh bikin. Em bi gelemperî min-widthdi pirsên xwe yên medyayê de bikar tînin.

• Yekem mobîl, sêwirana bersivdar armanc e. CSS-ya Bootstrap armanc dike ku kêmtirîn şêwazan bicîh bîne da ku sêwiranek di xala herî piçûk de bixebite, û dûv re li ser şêwazan qat bike da ku wê sêwiranê ji bo amûrên mezin rast bike. Ev CSS-ya we xweşbîn dike, dema renderkirinê çêtir dike, û ji bo mêvanên we ezmûnek mezin peyda dike.

Xalên veqetandinê yên berdest

Bootstrap şeş xalên veqetandinê yên xwerû vedihewîne, ku carinan wekî rêzikên torê têne binav kirin , ji bo avakirina bersivdar. Ger hûn pelên Sass-a çavkaniya me bikar tînin ev xalên veqetandinê dikarin bêne xweş kirin.

Her xala veqetandinê ji bo ku bi rehetî konteynerên ku firehiyên wan pirjimar 12 ne bigire hate hilbijartin. Xalên şkestinê di heman demê de nûnerê komek ji mezinahiyên cîhaza hevpar û pîvanên dîmenderê ne — ew bi taybetî her dozek bikar an amûrê armanc nakin. Di şûna wê de, rêze bingehek bihêz û domdar peyda dike ku ji bo hema hema her amûrekê were avakirin.

Van xalên veqetandinê bi riya Sass-ê ve têne xweş kirin — hûn ê wan di nexşeyek Sass-ê de di şêwaza me de bibînin _variables.scss.

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

Ji bo bêtir agahdarî û nimûneyên li ser ka meriv çawa nexşe û guhêrbarên me yên Sass biguhezîne, ji kerema xwe serî li beşa Sass ya belgeya Grid bidin .

Pirsên medyayê

Ji ber ku Bootstrap ji bo pêşîlêgirtina mobîl hatî pêşve xistin, em çend pirsên medyayê bikar tînin da ku ji bo sêwirandin û navgînên xwe xalên şikestî biafirînin. Van xalên veqetandinê bi piranî li ser bingeha herî kêm firehiyên dîtinê ne û rê didin me ku em hêmanan bi guheztina dîmenderê mezin bikin.

Min-width

Bootstrap di serî de rêzikên lêgerîna medyaya jêrîn -an jî xalên veqetandinê- di pelên me yên çavkaniya Sass de ji bo sêwirana me, pergala torê, û pêkhateyên me bikar tîne.

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

Van mîksên Sass di CSS-ya meya berhevkirî de bi karanîna nirxên ku di guhêrbarên me yên Sass de hatine ragihandin têne wergerandin. Bo nimûne:

// 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-firehiya

Em carinan pirsên medyayê yên ku ber bi rêyek din ve diçin (mezinahiya ekranê ya diyar an piçûktir ) bikar tînin:

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

Van tevliheviyan wan xalên veqetandinê yên diyarkirî digirin, .02pxji wan kêm dikin, û wan wekî max-widthnirxên me bikar tînin. Bo nimûne:

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

Single breakpoint

Di heman demê de pirs û mîksên medyayê jî hene ku ji bo armanckirina yek perçeyek mezinahiyên ekranê bi karanîna herî kêm û herî zêde firehiya xala veqetînê bikar tînin.

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

Mînakî, @include media-breakpoint-only(md) { ... }dê encam bibe:

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

Di navbera xalên veqetînê de

Bi heman rengî, pirsên medyayê dibe ku pirfirehiya xala veqetandinê bigire:

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

Ku di encamê de:

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