Nā Mokuna

Nā manaʻo kumu

• ʻO nā breakpoints nā poloka 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-widthmā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.

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.scssstylesheet.

$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 no ka hana ʻana i nā breakpoints noʻonoʻo no kā mākou papahana 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 waihona Sass no kā mākou hoʻonohonoho, ʻōnaehana pūnaewele, 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 .02pxmai ia mau mea, a hoʻohana iā lākou e like me kā mākou max-widthwaiwai. ʻo kahi laʻana:

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

ʻO ka haki hoʻokahi

Aia kekahi mau nīnau a me nā huila no ka huli ʻana i hoʻokahi ʻāpana o ka nui o ka pale me ka 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) { ... }