Breakpoints

Kunċetti ewlenin

• Breakpoints huma l-blokki tal-bini tad-disinn reattiv. Użahom biex tikkontrolla meta t-tqassim tiegħek jista' jiġi adattat fuq viewport partikolari jew daqs tal-apparat.

• Uża mistoqsijiet tal-midja biex tfassal is-CSS tiegħek skont il-breakpoint. Il-mistoqsijiet tal-midja huma karatteristika tas-CSS li jippermettulek tapplika b'mod kondizzjonali stili bbażati fuq sett ta' parametri tal-browser u tas-sistema operattiva. Aħna l-aktar komunement nużaw min-widthfil-mistoqsijiet tal-midja tagħna.

• Mowbajl l-ewwel, disinn li jirrispondu huwa l-għan. Is-CSS ta 'Bootstrap għandu l-għan li japplika l-minimu assolut ta' stili biex jagħmel tqassim jaħdem fl-iżgħar breakpoint, u mbagħad saffi fuq stili biex jaġġustaw dak id-disinn għal apparati akbar. Dan jtejjeb is-CSS tiegħek, itejjeb il-ħin tar-rendi, u jipprovdi esperjenza kbira għall-viżitaturi tiegħek.

Breakpoints disponibbli

Bootstrap jinkludi sitt breakpoints default, xi kultant imsejħa grid tiers , għall-bini b'mod reattiv. Dawn il-punti ta' waqfien jistgħu jiġu personalizzati jekk qed tuża l-fajls Sass tas-sors tagħna.

Kull breakpoint intgħażel biex iżomm komdu kontenituri li l-wisgħat tagħhom huma multipli ta '12. Breakpoints huma wkoll rappreżentattivi ta' subsett ta 'daqsijiet ta' apparat komuni u dimensjonijiet tal-viewport — ma jimmirawx speċifikament għal kull każ ta 'użu jew apparat. Minflok, il-firxiet jipprovdu pedament b'saħħtu u konsistenti biex jibnu fuq għal kważi kull apparat.

Dawn il-punti ta' waqfien huma customizable permezz ta' Sass—ssibhom f'mappa ta' Sass fl- _variables.scssstylesheet tagħna.

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

Għal aktar informazzjoni u eżempji dwar kif timmodifika l-mapep u l-varjabbli Sass tagħna, jekk jogħġbok irreferi għat -taqsima Sass tad-dokumentazzjoni tal-Grid .

Mistoqsijiet tal-midja

Peress li Bootstrap huwa żviluppat biex ikun mobbli l-ewwel, nużaw numru żgħir ta ' mistoqsijiet tal-midja biex noħolqu breakpoints sensibbli għat-tqassim u l-interfaces tagħna. Dawn il-punti ta' waqfien huma l-aktar ibbażati fuq wisgħat minimi tal-viewport u jippermettulna nżidu l-elementi hekk kif tinbidel il-viewport.

Min-wisa '

Bootstrap primarjament juża l-firxiet ta 'mistoqsijiet tal-midja li ġejjin—jew breakpoints—fil-fajls Sass tas-sors tagħna għat-tqassim, is-sistema tal-grilja u l-komponenti tagħna.

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

Dawn il-mixins Sass jittraduċu fis-CSS ikkumpilat tagħna billi tuża l-valuri ddikjarati fil-varjabbli Sass tagħna. Pereżempju:

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

Kultant nużaw mistoqsijiet tal-midja li jmorru fid-direzzjoni l-oħra (id-daqs tal-iskrin mogħti jew iżgħar ):

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

Dawn il-mixins jieħdu dawk il-punti ta' waqfien iddikjarati, inaqqsu .02pxminnhom, u jużawhom bħala l- max-widthvaluri tagħna. Pereżempju:

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

Single breakpoint

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

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

For example the @include media-breakpoint-only(md) { ... } will result in :

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

Between breakpoints

Similarly, media queries may span multiple breakpoint widths:

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

Which results in:

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