Nga Waahi

Nga ariā matua

• Ko nga waahi ko nga poraka hanga o te hoahoa urupare. Whakamahia hei whakahaere i te wa ka taea te whakarereke i to tahora ki tetahi tauranga tirohanga, rahinga taputapu ranei.

• Whakamahia nga patai pāpāho ki te hoahoa i to CSS ma te waahi pakaru. Ko nga patai pāpāho tetahi waahanga o te CSS e taea ai e koe te tono tikanga i runga i te huinga o nga tawhā tirotiro me nga punaha whakahaere. Ka whakamahia e min-widthmatou i roto i o maatau patai pāpāho.

• Ko te waea pūkoro tuatahi, ko te hoahoa whakautu te kaupapa. Ko te CSS a Bootstrap e whai ana ki te whakamahi i te iti rawa o nga ahua kia pai ai te mahi tahora ki te waahi pakaru iti rawa atu, katahi ka paparanga ki nga momo hei whakatika i taua hoahoa mo nga taputapu nui ake. Ma tenei ka whakapai ake i to CSS, ka whakapai ake i te waa whakaputa, ka whai wheako pai mo o manuhiri.

Nga waahi pakaru e waatea ana

Kei roto i te Bootstrap nga waahi pakaru taunoa e ono, i etahi wa ka kiia ko nga taumata matiti , mo te hanga i te aro. Ka taea te whakarite i enei waahi pakaru mena kei te whakamahi koe i o maatau punaha Sass puna.

I kowhiria ia waahi pakaru hei pupuri pai i nga ipu he maha nga whanui o te 12. Ko nga waahi pakaru he tohu ano mo te waahanga o nga rahi o nga taputapu noa me nga waahanga tirohanga - kaore e aro nui ki nga keehi katoa, taputapu ranei. Engari, ka whakaratohia e nga awhe he turanga pakari me te rite tonu hei hanga mo te tata ki nga taputapu katoa.

Ka taea te whakarite ma te Sass enei waahi wehenga—ka kitea e koe i roto i te mapi Sass i roto i ta maatau _variables.scsspepa ahua.

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

Mo etahi atu korero me nga tauira mo te whakarereke i o maatau mahere Sass me nga taurangi, tirohia te waahanga Sass o te tuhinga Matiti .

Uiui pāpāho

I te mea kua whakawhanakehia a Bootstrap hei waea pūkoro i te tuatahi, ka whakamahia e matou he maha o nga patai pāpāho ki te hanga i nga waahi pakaru mo o matou whakatakotoranga me o maatau hononga. Ko enei waahi pakaru i te nuinga o te waa i runga i nga whanui tauranga tiro iti ka taea e maatau te whakarahi i nga huānga ka huri te tauranga tirohanga.

Min-whanui

Ko te nuinga o te whakamahi a Bootstrap i nga awhe patai pāpāho e whai ake nei—he waahi wehenga ranei—i roto i ta maatau puna puna kōnae Sass mo to tahora, punaha matiti, me nga waahanga.

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

Ka whakamaoritia enei ranunga Sass i roto i ta maatau CSS kua whakahiato ma te whakamahi i nga uara kua whakahuahia i roto i a maatau taurangi Sass. Hei tauira:

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

I etahi wa ka whakamahi matou i nga patai pāpāho ka haere ki tetahi atu huarahi (te rahi o te mata kua tohua , he iti ake ranei ):

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

Ka tangohia e enei ranunga nga waahi kua kiia, ka tangohia .02pxmai, ka whakamahia hei max-widthuara. Hei tauira:

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

Waahi wehenga kotahi

Arā ano hoki nga patai pāpāho me nga whakaranu mo te aro ki te waahanga kotahi o te rahi o te mata ma te whakamahi i te iti me te morahi whawhati whanui.

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

Hei tauira @include media-breakpoint-only(md) { ... }ka puta mai:

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

I waenga i nga waahi pakaru

Waihoki, ka taea e nga patai pāpāho te whanui i nga whanui waahanga maha:

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

Ko te hua o:

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