Briseadh-phuingean

Bun-bheachdan bunaiteach

• Tha puingean brisidh nam bunaitean de dhealbhadh freagairteach. Cleachd iad gus smachd a chumail air cuin a ghabhas an cruth agad atharrachadh aig port-seallaidh sònraichte no meud inneal.

• Cleachd ceistean meadhanan gus do CSS a dhealbhadh le briseadh. Tha ceistean meadhanan mar fheart de CSS a leigeas leat stoidhlichean a chuir an sàs ann an suidheachadh stèidhichte air seata de pharaimearan brabhsair agus siostam obrachaidh. Bidh sinn a’ cleachdadh mar as trice min-widthanns na ceistean meadhanan againn.

• Is e dealbhadh gluasadach an toiseach, dealbhadh freagairteach an amas. Tha CSS aig Bootstrap ag amas air an ìre as lugha de stoidhlichean a chuir an sàs gus toirt air cruth obrachadh aig an ìre as lugha de bhriseadh, agus an uairsin sreathan air stoidhlichean gus an dealbhadh sin atharrachadh airson innealan nas motha. Bidh seo a’ dèanamh an fheum as fheàrr den CSS agad, a’ leasachadh an ùine tairgse, agus a’ toirt deagh eòlas don luchd-tadhail agad.

Puingean brisidh rim faighinn

Tha Bootstrap a’ toirt a-steach sia puingean brisidh bunaiteach, ris an canar uaireannan ìrean clèithe , airson togail gu ciallach. Faodar na puingean brisidh sin a ghnàthachadh ma tha thu a’ cleachdadh ar tùs faidhlichean Sass.

Chaidh gach puing-briseadh a thaghadh gus soithichean a chumail gu comhfhurtail aig a bheil leud iomadan de 12. Tha puingean brisidh cuideachd a’ riochdachadh fo-sheata de mheudan innealan cumanta agus tomhasan sealladh-seallaidh - chan eil iad ag amas gu sònraichte air a h-uile cùis cleachdaidh no inneal. An àite sin, tha na raointean a’ toirt bunait làidir is cunbhalach airson togail air cha mhòr inneal sam bith.

Faodar na puingean brisidh sin a ghnàthachadh tro Sass - lorgaidh tu iad ann am mapa Sass anns an _variables.scssduilleag stoidhle againn.

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

Airson tuilleadh fiosrachaidh agus eisimpleirean air mar a dh’ atharraicheas tu ar mapaichean Sass agus caochladairean, thoir sùil air an roinn Sass de na sgrìobhainnean Clèithe .

Ceistean meadhanan

Leis gu bheil Bootstrap air a leasachadh gus a bhith gluasadach an toiseach, bidh sinn a’ cleachdadh dòrlach de cheistean meadhanan gus puingean brisidh ciallach a chruthachadh airson ar cruth agus ar eadar-aghaidh. Tha na puingean brisidh sin stèidhichte sa mhòr-chuid air an leud as lugha de shealladh-seallaidh agus leigidh sinn leinn eileamaidean a mheudachadh mar a bhios am port-seallaidh ag atharrachadh.

Min-leud

Bidh Bootstrap gu sònraichte a’ cleachdadh na raointean ceist meadhanan a leanas - no puingean brisidh - anns na faidhlichean Sass stòr againn airson ar cruth, siostam clèithe, agus co-phàirtean.

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

Bidh na measgachadh Sass sin ag eadar-theangachadh anns an CSS cruinnichte againn a’ cleachdadh na luachan a chaidh ainmeachadh anns na caochladairean Sass againn. Mar eisimpleir:

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

Bidh sinn uaireannan a’ cleachdadh cheistean meadhanan a thèid an taobh eile (am meud sgrion a chaidh a thoirt seachad no nas lugha ):

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

Bidh na measgachaidhean sin a’ toirt na puingean brisidh dearbhte sin, a’ toirt air falbh .02pxbhuapa, agus gan cleachdadh mar ar max-widthluachan. Mar eisimpleir:

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

Àite briseadh singilte

Tha ceistean meadhanan agus measgachadh ann cuideachd airson a bhith ag amas air aon roinn de mheudan sgrion a’ cleachdadh an leud as ìsle agus as àirde.

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

Mar eisimpleir @include media-breakpoint-only(md) { ... }bidh an toradh ann:

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

Eadar puingean briseadh

San aon dòigh, faodaidh ceistean meadhanan a dhol thairis air grunn leudan brisidh:

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

A tha mar thoradh air:

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