Mga breakpoint

Mga pangunahing konsepto

• Ang mga breakpoint ay ang mga bloke ng pagbuo ng tumutugon na disenyo. Gamitin ang mga ito upang kontrolin kung kailan maaaring iakma ang iyong layout sa isang partikular na viewport o laki ng device.

• Gumamit ng mga query sa media para i-architect ang iyong CSS sa pamamagitan ng breakpoint. Ang mga query sa media ay isang feature ng CSS na nagbibigay-daan sa iyong maglapat ng mga istilo batay sa isang hanay ng mga parameter ng browser at operating system. Karaniwan naming ginagamit min-widthsa aming mga query sa media.

• Mobile una, tumutugon disenyo ay ang layunin. Nilalayon ng CSS ng Bootstrap na ilapat ang kaunting mga istilo upang gumana ang isang layout sa pinakamaliit na breakpoint, at pagkatapos ay mag-layer sa mga estilo upang ayusin ang disenyo na iyon para sa mas malalaking device. Ino-optimize nito ang iyong CSS, pinapahusay ang oras ng pag-render, at nagbibigay ng magandang karanasan para sa iyong mga bisita.

Magagamit na mga breakpoint

Kasama sa Bootstrap ang anim na default na breakpoint, kung minsan ay tinutukoy bilang mga grid tier , para sa pagbuo nang tumutugon. Maaaring i-customize ang mga breakpoint na ito kung ginagamit mo ang aming source na Sass file.

Ang bawat breakpoint ay pinili upang kumportableng hawakan ang mga container na ang lapad ay multiple ng 12. Ang mga breakpoint ay kumakatawan din sa isang subset ng mga karaniwang laki ng device at viewport na dimensyon—hindi nila partikular na tina-target ang bawat use case o device. Sa halip, ang mga hanay ay nagbibigay ng matibay at pare-parehong pundasyon para sa halos anumang device.

Ang mga breakpoint na ito ay nako-customize sa pamamagitan ng Sass—makikita mo ang mga ito sa isang mapa ng Sass sa aming _variables.scssstylesheet.

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

Para sa higit pang impormasyon at mga halimbawa kung paano baguhin ang aming mga mapa at variable ng Sass, mangyaring sumangguni sa seksyong Sass ng dokumentasyon ng Grid .

Mga query sa media

Dahil ang Bootstrap ay binuo upang maging mobile muna, gumagamit kami ng ilang mga query sa media upang lumikha ng mga makabuluhang breakpoint para sa aming mga layout at interface. Ang mga breakpoint na ito ay kadalasang nakabatay sa mga minimum na lapad ng viewport at nagbibigay-daan sa amin na palakihin ang mga elemento habang nagbabago ang viewport.

Min-width

Pangunahing ginagamit ng Bootstrap ang mga sumusunod na hanay ng query ng media—o mga breakpoint—sa aming source na Sass file para sa aming layout, grid system, at mga bahagi.

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

Ang mga Sass mix na ito ay nagsasalin sa aming pinagsama-samang CSS gamit ang mga value na idineklara sa aming mga Sass variable. Halimbawa:

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

Paminsan-minsan, gumagamit kami ng mga query sa media na papunta sa kabilang direksyon (ang ibinigay na laki ng screen o mas maliit ):

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

Kinukuha ng mga mixin na ito ang mga ipinahayag na breakpoint, ibawas .02pxsa kanila, at gamitin ang mga ito bilang aming mga max-widthhalaga. Halimbawa:

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

Isang breakpoint

Mayroon ding mga media query at mixin para sa pag-target ng isang segment ng mga laki ng screen gamit ang minimum at maximum na lapad ng 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) { ... }

Halimbawa ang @include media-breakpoint-only(md) { ... }magreresulta sa:

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

Sa pagitan ng mga breakpoint

Katulad nito, ang mga query sa media ay maaaring sumasaklaw sa maraming lapad ng breakpoint:

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

Alin ang nagreresulta sa:

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