Li-breakpoints

Likhopolo tsa mantlha

• Li-breakpoints ke litšiea tsa moaho oa moralo o arabelang. Li sebelise ho laola hore na sebopeho sa hau se ka fetoloa neng sebakeng se itseng sa pono kapa boholo ba sesebelisoa.

• Sebelisa lipotso tsa media ho theha CSS ea hau ka breakpoint. Lipotso tsa mecha ea litaba ke karolo ea CSS e u lumellang hore u sebelise mekhoa e thehiloeng ho sebatli le liparamente tsa sistimi e sebetsang. Re sebelisa hangata min-widthlipotsong tsa rona tsa media.

• Mohala oa pele, moralo o arabelang ke sepheo. Bootstrap's CSS e ikemiselitse ho sebelisa bonyane ba setaele ho etsa hore moralo o sebetse sebakeng se senyenyane ka ho fetesisa, ebe o beha likarolo tsa setaele ho lokisa moralo oo bakeng sa lisebelisoa tse kholoanyane. Sena se ntlafatsa CSS ea hau, se ntlafatsa nako ea ho fana, 'me se fana ka boiphihlelo bo monate ho baeti ba hau.

Li-breakpoints tse teng

Bootstrap e kenyelletsa li-breakpoints tse tšeletseng tsa kamehla, tseo ka linako tse ling li bitsoang li -grid tiers , bakeng sa ho aha ka mokhoa o arabelang. Li-breakpoints tsena li ka etsoa haeba u sebelisa mohloli oa lifaele tsa Sass.

Sebaka se seng le se seng se khethiloe ho tšoara lijana tseo bophara ba tsona e leng li-multiples tsa 12. Li-breakpoints li boetse li emela sehlopha se senyenyane sa boholo bo tloaelehileng ba lisebelisoa le litekanyo tsa pono-ha li shebane ka ho toba le mokotlana o mong le o mong oa tšebeliso. Ho e-na le hoo, mabala a fana ka motheo o tiileng le o tsitsitseng oa ho haha ​​​​ho hoo e ka bang sesebelisoa leha e le sefe.

Li-breakpoint tsena li ka etsoa ka mokhoa o ikhethileng ka Sass—u tla li fumana 'mapeng oa Sass leqepheng la rona _variables.scss.

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

Bakeng sa lintlha tse ling le mehlala ea ho fetola 'mapa le mefuta e fapaneng ea Sass, ka kopo sheba karolo ea Sass ea litokomane tsa Grid .

Lipotso tsa mecha ea litaba

Kaha Bootstrap e ntlafalitsoe hore e be selefouno pele, re sebelisa lipotso tse seng kae tsa mecha ea litaba ho theha likheo tse utloahalang bakeng sa meralo le lihokelo tsa rona. Hangata li-breakpoints tsena li ipapisitse le bophara ba bonyane ba sebaka sa pono, 'me li re lumella ho phahamisa likarolo ha sebaka sa pono se fetoha.

Bophara bo nyane

Bootstrap haholo-holo e sebelisa mefuta e latelang ea lipotso tsa mecha ea litaba-kapa li-breakpoints-mohloling oa rona oa lifaele tsa Sass bakeng sa sebopeho sa rona, tsamaiso ea grid, le likaroloana.

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

Metsoako ena ea Sass e fetolela ho CSS ea rona e hlophisitsoeng e sebelisa boleng bo boletsoeng mefuteng ea rona ea Sass. Ka mohlala:

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

Boholo ba bophara

Ka linako tse ling re sebelisa lipotso tsa media tse eang lehlakoreng le leng (saese e fanoeng skrineng kapa e nyane ):

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

Metsoako ena e nka li-breakpoints tse boletsoeng, e li tlose .02pxho tsona, ebe e li sebelisa e le max-widthlitekanyetso tsa rona. Ka mohlala:

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

Sebaka se le seng

Ho boetse ho na le lipotso tsa mecha ea litaba le li-mixins bakeng sa ho shebana le karolo e le 'ngoe ea boholo ba skrine ho sebelisa bonyane le bophara bo phahameng ka ho fetisisa.

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

Ka mohlala, @include media-breakpoint-only(md) { ... }phello e tla ba:

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

Pakeng tsa breakpoints

Ka mokhoa o ts'oanang, lipotso tsa media li ka akaretsa bophara ba libaka tse ngata:

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

E fellang ka:

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