Eten-puntuak

Oinarrizko kontzeptuak

• Eten-puntuak diseinu responsivearen eraikuntza-blokeak dira. Erabili itzazu zure diseinua noiz egokitu daitekeen bistaratze edo gailuaren tamaina jakin batean kontrolatzeko.

• Erabili multimedia kontsultak zure CSS eten-puntuaren arabera arkitektatzeko. Multimedia-kontsultak CSS-ren ezaugarri bat dira, arakatzaile eta sistema eragileen parametro multzo batean oinarritutako estiloak baldintzapean aplikatzeko aukera ematen duena. Gehienetan erabiltzen dugu min-widthgure komunikabideetako kontsultetan.

• Mugikorra lehenik, diseinu sentikorra da helburua. Bootstrap-en CSS-ak estiloen gutxieneko aplikazioa du diseinua eten-puntu txikienean funtziona dezan, eta gero estiloen geruzak diseinu hori gailu handiagoetarako doitzeko. Horrek zure CSS optimizatzen du, errendatze-denbora hobetzen du eta esperientzia bikaina eskaintzen die bisitariei.

Eskuragarri dauden eten-puntuak

Bootstrap-ek sei eten-puntu lehenetsi ditu, batzuetan sare-maila gisa aipatzen direnak, modu erreaktiboan eraikitzeko. Eten-puntu hauek pertsonaliza daitezke gure iturburuko Sass fitxategiak erabiltzen ari bazara.

Eten-puntu bakoitza 12ren zabalerak multiploak diren edukiontziei eroso eusteko aukeratu zen. Eten-puntuak gailuen tamaina arrunten eta bistaratze-dimentsioen azpimultzo baten adierazgarriak dira, halaber; Horren ordez, barrutiek oinarri sendo eta koherentea eskaintzen dute ia edozein gailurentzat.

_variables.scssEten-puntu hauek Sass bidez pertsonaliza daitezke; gure estilo -orriko Sass mapa batean aurkituko dituzu .

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

Gure Sass mapak eta aldagaiak aldatzeari buruzko informazio eta adibide gehiago lortzeko, begiratu Sass atala Grid dokumentazioaren .

Hedabideen kontsultak

Bootstrap lehenik mugikorra izateko garatu denez, multimedia-kontsulta gutxi batzuk erabiltzen ditugu gure diseinu eta interfazeetarako eten-puntu zentzuzkoak sortzeko. Eten-puntu hauek, gehienbat, ikuspegi minimoen zabaleretan oinarritzen dira eta elementuak eskalatzeko aukera ematen digute bista aldatzen den heinean.

Gutxieneko zabalera

Bootstrap-ek batez ere multimedia kontsulta-barrutiak edo eten-puntuak erabiltzen ditu gure iturburuko Sass fitxategietan gure diseinurako, sareta-sistemarako eta osagaietarako.

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

Sass mixin hauek gure CSS konpilatuan itzultzen dira gure Sass aldagaietan adierazitako balioak erabiliz. Adibidez:

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

Gehienezko zabalera

Noizbehinka beste norabidean doazen multimedia kontsultak erabiltzen ditugu (emandako pantailaren tamaina edo txikiagoa ):

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

Mixin hauek deklaratutako eten-puntu horiek hartzen dituzte, kentzen .02pxdituzte eta gure max-widthbalio gisa erabiltzen dituzte. Adibidez:

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

Eten puntu bakarra

Pantaila-tamainen segmentu bakar batera bideratzeko multimedia-kontsultak eta nahasketak ere badaude eten-puntuaren zabalera minimoa eta maximoa erabiliz.

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

Adibidez, honako hauek @include media-breakpoint-only(md) { ... }izango dira:

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

Etenguneen artean

Era berean, multimedia-kontsultek eten-puntuaren zabalera ugari izan ditzakete:

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

Horrek ondorioztatzen du:

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