Breakpoints
Il-punti ta' waqfien huma wisgħat personalizzabbli li jiddeterminaw kif it-tqassim reattiv tiegħek iġib ruħu fuq id-daqsijiet tal-apparat jew tal-vetrina f'Bootstrap.
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-width
fil-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.
Breakpoint | Infiss tal-klassi | Dimensjonijiet |
---|---|---|
X-Żgħir | Xejn | <576px |
Żgħir | sm |
≥576px |
Medju | md |
≥768px |
Kbir | lg |
≥992px |
Kbir żejjed | xl |
≥1200px |
Extra extra kbir | xxl |
≥1400px |
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.scss
stylesheet 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 .02px
minnhom, u jużawhom bħala l- max-width
valuri tagħna. Pereżempju:
// 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
min-
u max-
prefissi u viewports b'wisgħat frazzjonali (li jistgħu jseħħu taħt ċerti kundizzjonijiet fuq apparati b'dpi għolja, pereżempju) billi nużaw valuri bi preċiżjoni ogħla.
Breakpoint uniku
Hemm ukoll mistoqsijiet tal-midja u mixins għall-mira ta 'segment wieħed ta' daqsijiet tal-iskrin bl-użu tal-wisa 'ta' breakpoint minimi u massimi.
@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) { ... }
Pereżempju, ir- @include media-breakpoint-only(md) { ... }
riżultat se jirriżulta fi:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
Bejn breakpoints
Bl-istess mod, il-mistoqsijiet tal-midja jistgħu jkopru diversi wisgħat ta' breakpoint:
@include media-breakpoint-between(md, xl) { ... }
Li jirriżulta fi:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }