Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
in English

Tu'uga

O Breakpoints o lautele faʻapitoa e iloa ai pe faʻafefea lau faʻatulagaina tali i luga ole masini poʻo le tele o vaaiga ile Bootstrap.

Manatu autu

  • Breakpoints o poloka fau o le mamanu tali. Fa'aaoga latou e pulea ai le taimi e mafai ai ona fetu'una'i lau fa'atulagaina i se va'aiga fa'apitoa po'o le tele o masini.

  • Fa'aaogā fesili fa'asalalau e fau ai lau CSS ile va'aiga. O fesili fa'asalalau o se vaega o le CSS e fa'ataga ai oe e fa'aoga tu'utu'uga sitaili e fa'avae i luga o se seti o su'esu'ega ma fa'agaioiga faiga fa'aoga. E masani ona matou fa'aoga min-widthi a matou fesili fa'asalalau.

  • Mobile muamua, mamanu tali o le sini. O le Bootstrap's CSS e fa'atatau e fa'aoga sitaili aupito itiiti e fa'atino ai se fa'atulagaina i le pito la'ititi la'ititi, ona fa'apipi'i ai lea i sitaili e fetuutuunai ai le mamanu mo masini tetele. Ole mea lea e faʻamalieina ai lau CSS, faʻaleleia le taimi faʻaliliu, ma maua ai se poto masani mo au tagata asiasi.

Avanoa breakpoints

O le Bootstrap e aofia ai le ono faaletonu, o nisi taimi e taʻua o faʻasologa faʻasologa , mo le faʻaleleia o le fausiaina. E mafai ona fa'avasegaina nei va'aiga pe afai o lo'o e fa'aogaina a matou faila faila Sass.

Vaevaega Class infix Fua
X-Laiti Leai <576px
Laiti sm ≥576px
Alafua md ≥768px
Tele lg ≥992px
Tele tele xl ≥1200px
Lapopo'a fa'aopoopo xxl ≥1400px

Sa filifilia vaega ta'itasi e u'u lelei ai atigipusa o lona lautele e ta'i 12. O va'aiga e fai ma sui o se vaega o le tele o masini masani ma le tele o le va'aiga—e le fa'atatau tonu i mea fa'aoga uma po'o masini. Nai lo lena, o laina e maua ai se faavae malosi ma tumau e fausia i luga mo toetoe lava o soʻo se masini.

O nei va'aiga e mafai ona fa'avasegaina e ala i le Sass—e te mauaina i se fa'afanua Sass i la matou _variables.scsssitaili.

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

Mo nisi faʻamatalaga ma faʻataʻitaʻiga i le auala e sui ai a matou faʻafanua Sass ma fesuiaiga, faʻamolemole vaʻai i le vaega Sass o le Grid pepa .

Fa'asalalauga fesili

Talu ai ona o le Bootstrap ua atiaʻe e avea muamua ma telefoni feaveaʻi, matou te faʻaogaina ni nai faʻamatalaga faʻasalalau e fai ai ni vaʻa maaleale mo a matou faʻatulagaga ma fesoʻotaʻiga. O nei vaeluaga e tele lava e fa'avae i luga ole la'ititi ole va'aiga lautele ma fa'ataga ai tatou e fa'asili elemene pe a suia le va'aiga.

Min-lautele

O lo'o fa'aaoga muamua e Bootstrap vaega o fesili fa'asalalau nei—po'o fa'amavaega—i la tatou fa'apogai faila Sass mo la tatou fa'atulagaina, faiga fa'asologa, ma vaega.

// 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 nei fa'afefiloi Sass e fa'aliliu i totonu o la tatou CSS tu'ufa'atasia e fa'aaoga ai tau fa'ailoa i totonu oa tatou suiga Sass. Faataitaiga:

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

Matou te faʻaogaina i nisi taimi fesili faʻasalalau e alu i le isi itu (le lapopoa o le lau pe laʻititi ):

// 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 nei fa'afefiloi e ave na fa'aupuga va'aiga, toese .02pxmai ai, ma fa'aaoga e fai ma a tatou max-widthfa'atauga. Faataitaiga:

// 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
Why subtract .02px? Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.

Single breakpoint

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

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

For example the @include media-breakpoint-only(md) { ... } will result in :

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

Between breakpoints

Similarly, media queries may span multiple breakpoint widths:

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

Which results in:

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