Eten-puntuak
Eten-puntuak zabalera pertsonalizagarriak dira, zure diseinu sentikorra nola jokatzen duen zehazten dutenak Bootstrap-en gailu edo bista-tamainetan.
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-width
gure 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-puntua | Klase infixa | Neurriak |
---|---|---|
X-Txikia | Bat ere ez | <576px |
Txikia | sm |
≥576 px |
Ertaina | md |
≥768 px |
Handia | lg |
≥992 px |
Oso handia | xl |
≥1200px |
Extra handia | xxl |
≥1400px |
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.scss
Eten-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 .02px
dituzte eta gure max-width
balio 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) { ... }
min-
eta max-
aurrizkiak (baldintza jakin batzuetan gerta daitezkeenak, adibidez, ppp handiko gailuetan) zehaztasun handiagoko balioak erabiliz.
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) { ... }