Breakpoints

Breakpoints yo se lajè personnalisable ki detèmine ki jan layout reponn ou konpòte atravè gwosè aparèy oswa Viewport nan Bootstrap.

Nan paj sa a

Konsèp debaz yo

Breakpoints yo se blòk bilding nan konsepsyon reponn. Sèvi ak yo pou kontwole lè layout ou ka adapte nan yon vi patikilye oswa gwosè aparèy.
Sèvi ak medya requêtes pou achitekti CSS ou pa breakpoint. Rekèt medya yo se yon karakteristik CSS ki pèmèt ou aplike estil kondisyonèl ki baze sou yon seri paramèt navigatè ak sistèm opere. Nou pi souvan itilize min-widthnan demann medya nou an.
Mobil an premye, konsepsyon reponn se objektif la. CSS Bootstrap a gen pou objaktif pou aplike minimòm estil pou fè yon layout travay nan pwen ki pi piti a, ak Lè sa a, kouch sou estil yo ajiste konsepsyon sa a pou pi gwo aparèy. Sa a optimize CSS ou a, amelyore tan rann, epi li bay yon gwo eksperyans pou vizitè ou yo.

Disponib breakpoints

Bootstrap gen ladan sis pwen rupture default, pafwa refere yo kòm nivo kadriyaj , pou bati ak repons. Pwen sa yo ka Customized si w ap itilize dosye sous Sass nou yo.

Breakpoint	Klas enfiks	Dimansyon
Siplemantè piti	Okenn	<576px
Ti	`sm`	≥576px
Mwayen	`md`	≥768px
Gwo	`lg`	≥992px
Siplemantè gwo	`xl`	≥1200px
Siplemantè siplemantè gwo	`xxl`	≥1400px

Yo te chwazi chak breakpoint pou kenbe alèz kontenè ki gen lajè miltip 12. Breakpoints yo reprezante tou yon ti gwoup gwosè aparèy komen ak dimansyon vi yo—yo pa vize espesyalman chak ka itilize oswa aparèy. Olye de sa, seri yo bay yon fondasyon solid ak konsistan pou bati sou prèske nenpòt aparèy.

Points breakpoints sa yo personnalisable via Sass—w ap jwenn yo nan yon kat Sass nan _variables.scssstylesheet nou an.

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

Pou plis enfòmasyon ak egzanp sou fason pou modifye kat ak varyab Sass nou yo, tanpri al gade nan seksyon Sass nan dokiman Grid la .

Rekèt medya yo

Depi Bootstrap devlope pou li mobil an premye, nou itilize yon ti ponyen demann medya yo pou kreye pwen rupture sansib pou layouts ak interfaces nou yo. Pwen rupture sa yo sitou baze sou lajè minimòm de vi yo epi yo pèmèt nou echèl eleman yo pandan vi a ap chanje.

Min-lajè

Bootstrap prensipalman itilize seri medya rechèch sa yo—oswa pwen breakpoints—nan fichye Sass sous nou yo pou Layout nou an, sistèm kadriyaj, ak konpozan.

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

Mixin Sass sa yo tradui nan CSS konpile nou an lè l sèvi avèk valè yo deklare nan varyab Sass nou yo. Pa egzanp:

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

Nou itilize detanzantan demann medya ki ale nan lòt direksyon (gwosè ekran yo bay la oswa pi piti ):

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

Mixin sa yo pran pwen rupture yo deklare, fè soustraksyon .02pxnan men yo, epi sèvi ak yo kòm valè nou max-widthyo. Pa egzanp:

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

Poukisa soustraksyon .02px? Navigatè yo pa sipòte kounye a demann kontèks ranje , kidonk nou travay sou limit yo min-ak max-prefiks ak fenèt ak lajè fraksyon (ki ka rive nan sèten kondisyon sou aparèy ki wo-dpi, pou egzanp) lè nou itilize valè ak pi wo presizyon.

Single breakpoint

Genyen tou demann medya ak mixin pou vize yon sèl segman nan gwosè ekran lè l sèvi avèk lajè pwen minimòm ak maksimòm.

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

Pou egzanp, sa @include media-breakpoint-only(md) { ... }pral lakòz:

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

Ant breakpoints

Menm jan an tou, demann medya yo ka kouvri plizyè lajè breakpoint:

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

Ki rezilta nan:

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