Nā Mokuna
ʻO nā breakpoints nā laula hiki ke hoʻoholo i ke ʻano o kāu hoʻolālā pane ʻana ma waena o nā hāmeʻa a i ʻole ka nui o ka nānā ʻana ma Bootstrap.
Nā manaʻo kumu
-
ʻO nā breakpoints nā papa kūkulu o ka hoʻolālā pane. E hoʻohana iā lākou e hoʻomalu i ka wā e hiki ke hoʻololi ʻia kāu hoʻolālā ma kahi ʻike kikoʻī a i ʻole ka nui o ka hāmeʻa.
-
E hoʻohana i nā nīnau media no ka hoʻolālā ʻana i kāu CSS ma ka breakpoint. He hiʻohiʻona o CSS nā nīnau nīnau Media e hiki ai iā ʻoe ke hoʻohana pono i nā ʻano ma muli o kahi pūʻulu o ka polokalamu kele pūnaewele a me nā ʻōnaehana hana. Hoʻohana pinepine
min-width
mākou i kā mākou mau nīnau media. -
Mobile mua, hoʻolālā pane ka pahuhopu. Manaʻo ʻo Bootstrap's CSS e hoʻohana i ka liʻiliʻi liʻiliʻi o nā kaila e hana i kahi hoʻolālā e hana ma kahi haʻihaʻi liʻiliʻi, a laila e kau i nā ʻano e hoʻoponopono i kēlā hoʻolālā no nā mea ʻoi aku ka nui. Hoʻonui kēia i kāu CSS, hoʻomaikaʻi i ka manawa hāʻawi, a hāʻawi i kahi ʻike maikaʻi no kāu mau malihini.
Loaʻa nā wahi haʻihaʻi
Aia ʻo Bootstrap i ʻeono mau wahi haʻihaʻi paʻamau, i kekahi manawa i kapa ʻia ʻo ia he grid tiers , no ke kūkulu ʻana me ka pane. Hiki ke hoʻopilikino ʻia kēia mau wahi haʻihaʻi inā ʻoe e hoʻohana nei i kā mākou kumu waihona Sass.
Wahi haʻihaʻi | Infix papa | Anana |
---|---|---|
X-Liilii | ʻAʻohe | <576px |
Liʻiliʻi | sm |
≥576px |
Kauwaena | md |
≥768px |
Nui | lg |
≥992px |
Nui loa | xl |
≥1200px |
Nui ʻoi aku ka nui | xxl |
≥1400px |
Ua koho ʻia kēlā me kēia wahi haʻihaʻi no ka hoʻopaʻa ʻoluʻolu ʻana i nā ipu nona nā laula he 12. He hōʻailona nō hoʻi nā wahi haʻihaʻi no kahi ʻāpana o ka nui o nā hāmeʻa maʻamau a me nā ana o ka nānā ʻana—ʻaʻole lākou e kuhikuhi pono i kēlā me kēia hihia hoʻohana a mea hana paha. Akā, hāʻawi nā pae i kahi kumu ikaika a kūpaʻa e kūkulu ʻia no kahi kokoke i nā mea hana.
Hoʻopilikino ʻia kēia mau wahi haʻihaʻi ma o Sass—e ʻike ʻoe iā lākou ma kahi palapala ʻāina Sass i kā mākou _variables.scss
pepa style.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
No ka ʻike hou aku a me nā laʻana e pili ana i ka hoʻololi ʻana i kā mākou mau palapala Sass a me nā mea hoʻololi, e ʻoluʻolu e nānā i ka ʻāpana Sass o ka palapala Grid .
Nīnau Media
No ka mea ua hoʻomohala ʻia ʻo Bootstrap e lilo i kelepona mua, hoʻohana mākou i kahi liʻiliʻi o nā nīnau media e hana i nā wahi haʻi kūpono no kā mākou hoʻolālā a me nā pilina. Hoʻokumu ʻia kēia mau wahi haʻihaʻi ma luna o nā ākea viewport liʻiliʻi a ʻae iā mākou e hoʻonui i nā mea e like me ka loli ʻana o ka viewport.
Min-ākea
Hoʻohana mua ʻo Bootstrap i nā pae hulina media—a i ʻole nā wahi haʻihaʻi—i loko o kā mākou kumu kumu waihona Sass no kā mākou hoʻolālā, ʻōnaehana grid, a me nā ʻāpana.
// 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;
}
}
Unuhi kēia mau hui Sass i kā mākou CSS i hōʻuluʻulu ʻia me ka hoʻohana ʻana i nā waiwai i haʻi ʻia ma kā mākou mau ʻano Sass. ʻo kahi laʻana:
// 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) { ... }
Kiko-ākea
Hoʻohana mākou i kekahi manawa i nā nīnau media e hele ana i kahi ʻaoʻao ʻē aʻe (ka nui o ka pale i hāʻawi ʻia a i ʻole ka liʻiliʻi ):
// 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;
}
}
Lawe kēia mau huila i kēlā mau wahi haʻihaʻi i haʻi ʻia, unuhi .02px
mai ia mau mea, a hoʻohana iā lākou e like me kā mākou max-width
waiwai. ʻo kahi laʻana:
// 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
min-
me max-
nā prefix a me nā puka ʻike me nā laula haʻihaʻi (hiki ke hana ʻia ma lalo o kekahi mau kūlana ma nā hāmeʻa kiʻekiʻe-dpi, no ka laʻana) me ka hoʻohana ʻana i nā waiwai me ka pololei ʻoi aku ka pololei.
ʻO ka haki hoʻokahi
Aia kekahi mau nīnau a me nā huila no ka huli ʻana i kahi ʻāpana o ka nui o ka pale e hoʻohana ana i ka laulā haʻahaʻa haʻahaʻa loa.
@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) { ... }
No ka laʻana, ka @include media-breakpoint-only(md) { ... }
hopena i:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
Ma waena o nā wahi haʻihaʻi
Pēlā nō, hiki i nā nīnau media ke hoʻopaʻa i nā ākea breakpoint he nui:
@include media-breakpoint-between(md, xl) { ... }
ʻO ka hopena i:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }