Brekpunten

Kearnbegripen

• Brekpunten binne de boustiennen fan responsyf ûntwerp. Brûk se om te kontrolearjen wannear jo yndieling kin wurde oanpast op in bepaalde viewport of apparaatgrutte.

• Brûk mediafragen om jo CSS te arsjitektearjen troch brekpunt. Mediafragen binne in funksje fan CSS wêrmei jo stilen betingst kinne tapasse op basis fan in set browser- en bestjoeringssysteemparameters. Wy brûke it meast min-widthyn ús mediafragen.

• Mobile earst, responsyf ûntwerp is it doel. De CSS fan Bootstrap is fan doel om it minimum oan stilen oan te passen om in yndieling te meitsjen op it lytste brekpunt, en dan lagen op stilen om dat ûntwerp oan te passen foar gruttere apparaten. Dit optimisearret jo CSS, ferbetteret de renderingstiid en leveret in geweldige ûnderfining foar jo besikers.

Beskikbere brekpunten

Bootstrap omfettet seis standert brekpunten, soms oantsjutten as grid tiers , foar responsyf bouwen. Dizze brekpunten kinne wurde oanpast as jo ús boarne Sass-bestannen brûke.

Elts brekpunt waard keazen om komfortabel te hâlden konteners wêrfan de breedte multiples fan 12 binne. Brekpunten binne ek represintatyf foar in subset fan mienskiplike apparaatgrutte en viewport-dimensjes - se rjochtsje net spesifyk op elk gebrûk of apparaat. Ynstee dêrfan leverje de berik in sterke en konsekwinte basis om op te bouwen foar hast elk apparaat.

Dizze brekpunten binne oanpasber fia Sass - jo sille se fine yn in Sass-kaart yn ús _variables.scssstylblêd.

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

Foar mear ynformaasje en foarbylden oer hoe't jo ús Sass-kaarten en fariabelen feroarje kinne, ferwize asjebleaft nei de Sass-seksje fan 'e Grid-dokumintaasje .

Media queries

Sûnt Bootstrap is ûntwikkele om earst mobyl te wêzen, brûke wy in hantsjefol mediafragen om ferstannige brekpunten te meitsjen foar ús yndielingen en ynterfaces. Dizze brekpunten binne meastentiids basearre op minimale viewport-breedtes en lit ús eleminten opskaalje as de viewport feroaret.

Min-breedte

Bootstrap brûkt yn it foarste plak de folgjende media-fraachbereiken - of brekpunten - yn ús boarne Sass-bestannen foar ús yndieling, rastersysteem en komponinten.

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

Dizze Sass-mixins oersette yn ús kompilearre CSS mei de wearden ferklearre yn ús Sass-fariabelen. Bygelyks:

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

Wy brûke sa no en dan mediafragen dy't yn 'e oare rjochting gean (de opjûne skermgrutte of lytser ):

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

Dizze mixins nimme dy ferklearre brekpunten, lûke .02pxderfan ôf en brûke se as ús max-widthwearden. Bygelyks:

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

Single brekpunt

D'r binne ek mediafragen en mixins foar it rjochtsjen fan in inkeld segmint fan skermgrutte mei de minimale en maksimale brekpuntbreedte.

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

Bygelyks it @include media-breakpoint-only(md) { ... }sil resultearje yn:

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

Tusken brekpunten

Op deselde manier kinne mediafragen meardere brekpuntbreedtes spanne:

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

Wat resultearret yn:

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