Breakpoints

Breakpoints ndeye customizable wides iyo inotaridza kuti yako inopindura dhizaini inoita sei pamudziyo wese kana saizi yekuona muBootstrap.

Pa peji ino

Core concepts

Breakpoints ndiwo mabhuroko ekuvaka anopindura dhizaini. Vashandise kudzora apo dhizaini yako inogona kuchinjirwa pane imwe nzvimbo yekuona kana saizi yemuchina.
Shandisa midhiya mibvunzo kugadzira CSS yako nebreakpoint. Mibvunzo yeMedia chinhu cheCSS chinokutendera kuti ushandise zvitaera zvinoenderana neseti yebrowser uye inoshanda system paramita. Isu tinowanzo shandisa min-widthmune yedu midhiya mibvunzo.
Nhare yekutanga, dhizaini inopindura ndicho chinangwa. Bootstrap's CSS inovavarira kushandisa hushoma hushoma hwematayera kuita kuti dhizaini ishande pane diki breakpoint, uyezve marongero pamatayera kugadzirisa iyo dhizaini yemidziyo mikuru. Izvi zvinokwidziridza CSS yako, inovandudza nguva yekupa, uye inopa ruzivo rwakanyanya kune vashanyi vako.

Mabreakpoints aripo

Bootstrap inosanganisira matanhatu default breakpoints, dzimwe nguva inonzi grid tiers , yekuvaka inoteerera. Aya mabreakpoint anogona kugadzirwa kana uri kushandisa yedu source Sass mafaera.

Breakpoint	Kirasi infix	Dimensions
X-Small	Hapana	<576px
Diki	`sm`	≥576px
Pakati	`md`	≥768px
Zvikuru	`lg`	≥992px
Kuwedzera kukuru	`xl`	≥1200px
Yakawedzera yakakura	`xxl`	≥1400px

Nzvimbo yega yega yakasarudzwa kuti ibate zvakanaka macontainer ane upamhi hwakapetwa kagumi nembiri. Pane kudaro, mitsara inopa hwaro hwakasimba uye hwakasimba hwekuvakira pane chero mudziyo.

Aya mabreakpoints anogoneka kuburikidza neSass-uchaawana muSass mepu mune yedu _variables.scssstylesheet.

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

Kuti uwane rumwe ruzivo nemienzaniso yekugadzirisa mamepu edu eSass uye zvinosiyana, ndapota tarisa kune chikamu cheSass cheGridhi zvinyorwa .

Media mibvunzo

Sezvo Bootstrap yakagadziridzwa kuti ive mbozha yekutanga, isu tinoshandisa mishoma yemibvunzo midhiya kugadzira inonzwisisika yekutyora kwemaitiro edu uye mainterface. Aya mabreakpoints anonyanya kuve akavakirwa pane mashoma ekutarisa upamhi uye anotibvumira kukwira kumusoro zvinhu sekuchinja kwekutarisa.

Min-width

Bootstrap inonyanya kushandisa iyo inotevera midhiya yemubvunzo marenji-kana breakpoints-mune yedu sosi mafaera eSass edhizaini yedu, grid system, uye zvikamu.

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

Aya maSass musanganiswa anodudzira mune yedu yakaunganidzwa CSS tichishandisa hunhu hwakaziviswa mune edu maSass akasiyana. Semuyenzaniso:

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

Isu dzimwe nguva tinoshandisa midhiya mibvunzo inoenda kune rimwe divi (iyo yakapihwa skrini saizi kana diki ):

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

Aya masanganiswa anotora iwo akaziviswa mabreakpoints, bvisa .02pxkubva pazviri, uye woashandisa sehunhu hwedu max-width. Semuyenzaniso:

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

Sei kubvisa .02px? Mabhurawuza parizvino haatsigire mivhunzo yemhando yepamusoro , saka tinoshanda zvakatenderedza min-uye max-prefixes uye nzvimbo dzekutarisa dzine hupamhi hwechikamu (izvo zvinogona kuitika mune mamwe mamiriro pamichina yepamusoro-dpi, semuenzaniso) nekushandisa zvakakosha zvine hunyoro hwepamusoro.

Single breakpoint

Kune zvakare midhiya mibvunzo uye musanganiswa wekunongedza chikamu chimwe chete chehukuru hwescreen uchishandisa hudiki uye hwakanyanya breakpoint upamhi.

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

Somuenzaniso, @include media-breakpoint-only(md) { ... }zvinoguma:

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

Between breakpoints

Saizvozvo, midhiya mibvunzo inogona kureba akawanda breakpoint wides:

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

Zvinoguma ne:

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