Mga breakpoint

Panguna nga mga konsepto

• Ang mga breakpoint mao ang mga bloke sa pagtukod sa responsive nga disenyo. Gamita kini aron makontrol kung kanus-a ang imong layout mahimong ipahiangay sa usa ka partikular nga viewport o gidak-on sa aparato.

• Gamita ang mga pangutana sa media sa pag-arkitekto sa imong CSS pinaagi sa breakpoint. Ang mga pangutana sa media usa ka bahin sa CSS nga nagtugot kanimo sa pag-apply sa kondisyon nga mga istilo base sa usa ka set sa mga parameter sa browser ug operating system. Kanunay namong gigamit min-widthsa among mga pangutana sa media.

• Mobile una, responsive nga disenyo mao ang tumong. Ang CSS sa Bootstrap nagtumong sa paggamit sa labing gamay nga mga istilo aron mahimo ang usa ka layout nga molihok sa pinakagamay nga breakpoint, ug dayon mga layer sa mga istilo aron ma-adjust kana nga disenyo alang sa dagkong mga aparato. Gi-optimize niini ang imong CSS, gipauswag ang oras sa paghubad, ug naghatag usa ka maayo nga kasinatian alang sa imong mga bisita.

Magamit nga mga breakpoint

Ang Bootstrap naglakip sa unom ka default breakpoints, usahay gitawag nga grid tiers , para sa responsive nga pagtukod. Kini nga mga breakpoint mahimong ipasibo kung gigamit nimo ang among gigikanan nga mga file nga Sass.

Ang matag breakpoint gipili nga komportable nga magkupot sa mga sudlanan kansang gilapdon mga multiple sa 12. Ang mga breakpoint nagrepresentar usab sa usa ka subset sa komon nga gidak-on sa device ug viewport nga mga dimensyon—wala kini espesipikong target sa matag use case o device. Hinuon, ang mga han-ay naghatag usa ka lig-on ug makanunayon nga pundasyon aron matukod alang sa hapit bisan unsang aparato.

Kini nga mga breakpoint mapasibo pinaagi sa Sass—imong makita kini sa usa ka Sass map sa among _variables.scssstylesheet.

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

Para sa dugang nga impormasyon ug mga pananglitan kon unsaon pag-usab sa atong Sass nga mga mapa ug mga variable, palihog tan-awa ang Sass nga seksyon sa Grid nga dokumentasyon .

Mga pangutana sa media

Tungod kay ang Bootstrap gihimo aron mahimong mobile una, naggamit kami og pipila ka mga pangutana sa media aron makahimo og makatarunganon nga mga breakpoint alang sa among mga layout ug interface. Kini nga mga breakpoint kasagaran gibase sa minimum nga viewport widths ug nagtugot kanamo sa pag-scale sa mga elemento samtang ang viewport mausab.

Min-lapad

Ang Bootstrap sa panguna naggamit sa mosunod nga media query ranges—o breakpoints—sa among source Sass files para sa among layout, grid system, ug mga component.

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

Kini nga mga Sass mixins gihubad sa among gihugpong nga CSS gamit ang mga kantidad nga gipahayag sa among Sass variable. Pananglitan:

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

Usahay migamit og mga pangutana sa media nga moadto sa laing direksyon (ang gihatag nga gidak-on sa screen o mas gamay ):

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

Gikuha sa kini nga mga mixin ang gideklarar nga mga breakpoints, kuhaan .02pxkini, ug gamita kini ingon among max-widthmga kantidad. Pananglitan:

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

Usa ka breakpoint

Adunay usab mga pangutana sa media ug mga mix para sa pag-target sa usa ka bahin sa mga gidak-on sa screen gamit ang minimum ug labing taas nga gilapdon sa 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) { ... }

Pananglitan ang @include media-breakpoint-only(md) { ... }moresulta sa:

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

Taliwala sa mga breakpoint

Sa susama, ang mga pangutana sa media mahimong mosangkad sa daghang gilapdon sa breakpoint:

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

Nga moresulta sa:

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