Dagiti Breakpoint

Dagiti kangrunaan a konsepto

• Dagiti breakpoint ti building blocks ti responsive design. Usaren dagitoy a mangkontrol no kaano a ti layoutmo ket mabalin a maibagay iti partikular a viewport wenno kadakkel ti alikamen.

• Usaren dagiti saludsod ti media tapno arkitekto ti CSS-mo babaen ti breakpoint. Dagiti panagsaludsod ti media ket maysa a tampok ti CSS a mangipalubos kenka a kondisional a mangyaplikar kadagiti estilo a naibatay iti maysa a grupo dagiti parametro ti browser ken sistema ti panagpataray. Kaaduan nga usarenmi min-widthkadagiti saludsodmi iti media.

• Mobile nga umuna, responsive design ti kalat. Ti CSS ti Bootstrap ket panggepna nga iyaplikar ti bare minimum dagiti estilo tapno mangaramid ti maysa a layout nga agtrabaho iti kabassitan a breakpoint, ken kalpasanna dagiti layers kadagiti estilo tapno maitunos dayta a disenio para kadagiti dakdakkel nga alikamen. Daytoy ket mangpasayaat ti CSS-mo, mangpasayaat ti oras ti panagiparang, ken mangipaay ti nasayaat a padas para kadagiti bisitam.

Dagiti magun-odan a breakpoint

Ti bootstrap ket mangiraman kadagiti innem a default a breakpoint, no dadduma ket naibagbaga a kas dagiti grid tiers , para iti panagbangon a makasungbat. Dagitoy a breakpoint ket mabalin a maibagay no agus-usar ka kadagiti taudan a Sass a papelesmi.

Tunggal breakpoint ket napili tapno komportable a mangiggem kadagiti pagkargaan a dagiti kalawada ket multiplo ti 12. Dagiti breakpoint ket mangibagi pay ti maysa a subgrupo dagiti gagangay a kadakkel ti alikamen ken dagiti dimension ti viewport—saanda nga espesipiko a puntiria ti tunggal maysa a kaso ti panagusar wenno alikamen. Imbes ketdi, dagiti range mangipaayda iti natibker ken agtultuloy a pundasion a maibangon para iti dandani aniaman nga alikamen.

Dagitoy a breakpoint ket mabalin a ma-customize babaen ti Sass—masarakam dagitoy iti mapa ti Sass iti _variables.scssstylesheet-mi.

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

Para iti ad-adu nga impormasion ken dagiti pagarigan no kasano a baliwan dagiti mapa ken variablemi ti Sass, pangngaasi a kitaen ti benneg ti Sass ti dokumentasion ti Grid .

Dagiti saludsod ti media

Gapu ta ti Bootstrap ket naaramid tapno umuna a mobile, agus-usarkami iti sumagmamano a panagsaludsod ti media tapno mangpartuat kadagiti nainsiriban a breakpoint para kadagiti layout ken interfacemi. Dagitoy a breakpoint ket kaaduan a naibatay kadagiti kabassitan a kalawa ti viewport ken mangipalubos kadakami a mang-scale kadagiti elemento bayat nga agbaliw ti viewport.

Min-kalawa nga

Ti Bootstrap ket nangruna nga agus-usar kadagiti sumaganad a sakop ti panagsaludsod ti media—wenno dagiti breakpoint—kadagiti taudan a Sass a papelestayo para iti layouttayo, sistema ti grid, ken dagiti paset.

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

Dagitoy a Sass mixins ket agipatarus iti naurnongtayo a CSS babaen ti panagusar kadagiti pateg a naideklara kadagiti Sass a variabletayo. Kas pangarigan:

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

Sagpaminsan nga agusarkami kadagiti saludsod ti media a mapan iti sabali a direksion (ti naited a kadakkel ti iskrin wenno basbassit ):

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

Dagitoy a mixin ket alaenda dagidiay naideklara a breakpoint, ikkatenda .02pxkadagitoy, ken usarenda dagitoy a kas dagiti max-widthpategtayo. Kas pangarigan:

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

Maymaysa a breakpoint

Adda pay dagiti panagsaludsod ti media ken dagiti mixin para iti panangpuntiria ti maymaysa a paset dagiti kadakkel ti iskrin babaen ti panagusar kadagiti kabassitan ken kangatuan a kalawa ti breakpoint.

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

Kas pagarigan ti @include media-breakpoint-only(md) { ... }will ket agresulta iti :

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

Iti nagbaetan dagiti breakpoint

Kasta met, dagiti panagsaludsod ti media ket mabalin a mangsaklaw kadagiti adu a kalawa ti breakpoint:

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

Nga agresulta iti:

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