Breakpoints

Hevitra fototra

• Breakpoints no fototry ny famolavolana mamaly. Ampiasao izy ireo mba hifehezana ny fotoana azo ampifanarahana amin'ny seranan-tsambo na ny haben'ny fitaovana manokana.

• Mampiasà fanontaniana amin'ny haino aman-jery mba handrafetana ny CSS-nao amin'ny alàlan'ny fiatoana. Ny fangatahan'ny haino aman-jery dia endri-javatra amin'ny CSS izay mamela anao hampihatra amin'ny fepetra mifanaraka amin'ny karazana navigateur sy rafitra fandidiana. Ampiasainay matetika min-widthamin'ny fanontanian'ny haino aman-jery.

• Ny finday aloha, ny famolavolana mamaly no tanjona. Ny CSS an'ny Bootstrap dia mikendry ny hampihatra ny endrika faran'izay kely indrindra mba hampandeha ny lamina amin'ny teboka faran'izay kely indrindra, ary avy eo manasokajy ireo fomba hanitsiana izany endrika izany ho an'ny fitaovana lehibe kokoa. Izany dia manatsara ny CSS-nao, manatsara ny fotoana fandefasana ary manome traikefa tsara ho an'ny mpitsidika anao.

Misy toerana fiatoana

Ny Bootstrap dia misy teboka fiatoana enina mahazatra, indraindray antsoina hoe tiers grids , ho an'ny fananganana mora. Ireo teboka fiatoana ireo dia azo amboarina raha mampiasa ny rakitra Sass loharanonay ianao.

Ny teboka tapaka tsirairay dia nofantenana mba hihazonana kaontenera moramora ny sakan'ny 12. Isan'ny ampahan'ny haben'ny fitaovana mahazatra sy ny refin'ny sera-pijerena ihany koa ny teboka fiatoana—tsy mikendry manokana ny tranga fampiasana na fitaovana rehetra. Fa kosa, manome fototra mafy sy tsy miovaova ho an'ny saika fitaovana rehetra ireo faritra ireo.

Azo amboarina amin'ny alalan'ny Sass ireo teboka fiatoana ireo—dia ho hitanao ao amin'ny sari-tany Sass ao amin'ny _variables.scsstakelakay.

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

Raha mila fanazavana fanampiny sy ohatra momba ny fomba hanovana ny sari-tanin'i Sass sy ny fari-piadidianay dia jereo ny fizarana Sass amin'ny tahirin-kevitra Grid .

Fanontaniana media

Satria ny Bootstrap dia novolavolaina ho finday voalohany, dia mampiasa fanontaniana media vitsivitsy izahay mba hamoronana fikatsahana saina ho an'ny fandrindrana sy ny fifandraisana. Ireo teboka fiatoana ireo dia mifototra amin'ny sakan'ny seranan-tsambo kely indrindra ary mamela antsika hampitombo ny singa rehefa miova ny seranan-tsambo.

Min-width

Ny Bootstrap dia mampiasa voalohany indrindra ireto andiana fangatahana fampahalalam-baovao manaraka ireto—na teboka fiatoana—ao amin'ny rakitra Sass loharanontsika ho an'ny firafitry ny rafitra, ny rafitra ary ny singa.

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

Ireo mixins Sass ireo dia mandika ao amin'ny CSS natambatray amin'ny fampiasana ny soatoavina voalaza ao amin'ny fari-piadidiana Sass. Ohatra:

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

Mampiasa fanontaniana amin'ny haino aman-jery mandeha amin'ny lalana hafa izahay indraindray (ny haben'ny efijery nomena na kely kokoa ):

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

Ireo mixins ireo dia maka ireo teboka nambara ireo, manaisotra .02pxamin'izy ireo ary mampiasa azy ireo ho max-widthsandantsika. Ohatra:

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

Fiatoana tokana

Misy ihany koa ny fangatahan'ny haino aman-jery sy ny mixins amin'ny fikojakojana ampahany tokana amin'ny haben'ny efijery amin'ny fampiasana ny sakany faran'izay kely indrindra sy ambony indrindra.

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

Ohatra, ny @include media-breakpoint-only(md) { ... }vokany dia:

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

Eo anelanelan'ny breakpoints

Toy izany koa, ny fangatahan'ny haino aman-jery dia mety haharitra amin'ny sakan'ny fiatoana maro:

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

Izay miteraka:

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