Iindawo zokuqhawula

Iingcamango ezingundoqo

• Ii-Breakpoints ziibhloko zokwakha zoyilo oluphendulayo. Zisebenzise ukulawula xa uyilo lwakho lunokulungiswa kwindawo ethile yokujonga okanye ubungakanani besixhobo.

• Sebenzisa imibuzo yemidiya ukuyila iCSS yakho ngebreakpoint. Imibuzo yemidiya luphawu lweCSS olukuvumela ukuba usebenzise izitayile ngokwemeko esekelwe kwiseti yesikhangeli kunye neeparamitha zenkqubo yokusebenza. Siqhele ukusebenzisa min-widthkwimibuzo yethu yemidiya.

• Iselula kuqala, uyilo oluphendulayo yinjongo. I-Bootstrap's CSS ijolise ekufakeni ubuncinci bezitayile ukwenza uyilo lusebenze kweyona ndawo incinci yoqhawulo, kwaye emva koko iileya kwizitayile ukulungelelanisa uyilo lwezixhobo ezikhulu. Oku kwandisa iCSS yakho, iphucula ixesha lokunikezela, kwaye ibonelela ngamava amahle kubatyeleli bakho.

Iindawo zokuqhawula ezikhoyo

I-Bootstrap ibandakanya iindawo zoqhawulo ezithandathu ezingagqibekanga, ngamanye amaxesha zibizwa ngokuba ziinqanaba zegridi , ukwakha ngokuphendula. Ezi breakpoints zingenziwa ngokwezifiso ukuba usebenzisa imvelaphi yethu yeefayile zeSass.

Indawo nganye yokuqhawuka ikhethwe ukuba ibambe ngokukhululekileyo izikhongozeli ezinobubanzi obuziziphindwa nge-12. Endaweni yoko, uluhlu lubonelela ngesiseko esomeleleyo nesiguquguqukayo sokwakha kuso nasiphi na isixhobo.

Ezi ndawo zokuqhawuka ziyenzeka nge-Sass-uya kuzifumana kwimephu ye-Sass kwiphepha _variables.scsslesimbo lethu.

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

Ngolwazi oluthe vetshe kunye nemizekelo malunga nendlela yokutshintsha iimephu zethu ze-Sass kunye nezinto eziguquguqukayo, nceda ujonge icandelo le-Sass leGridi yamaxwebhu .

Imibuzo yemidiya

Kuba iBootstrap iphuhliswe ukuba ihambe kuqala, sisebenzisa imibuzo embalwa yemithombo yeendaba ukwenza iindawo zokuqhawula ezinengqondo zoyilo lwethu kunye nojongano. Ezi ndawo zokuqhawuka zisekwe ubukhulu becala kobubanzi obuncinci bendawo yokujonga kwaye zisivumela ukuba sinyuse umgangatho njengoko utshintsho lwemboniselo.

Ububanzi obuncinci

I-Bootstrap ikakhulu isebenzisa olu luhlu lulandelayo lwemibuzo yemidiya-okanye iindawo zokuqhawula-kwimithombo yethu yeefayile ze-Sass zoyilo lwethu, inkqubo yegridi, kunye nezixhobo.

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

Le mixube ye-Sass iguqulela kwi-CSS yethu ehlanganisiweyo isebenzisa amaxabiso abhengezwe kwii-variables zethu ze-Sass. Umzekelo:

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

Ubukhulu obukhulu

Ngamanye amaxesha sisebenzisa imibuzo yemidiya eya kwelinye icala (ubungakanani obunikiweyo besikrini okanye encinci ):

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

Le mixins ithatha ezo breakpoints zibhengeziweyo, .02pxzithabathe kuzo, kwaye sizisebenzise njengeenqobo zethu max-width. Umzekelo:

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

Ikhefu elinye

Kukwakho imibuzo yemidiya kunye nemixube yokujolisa kwisegmenti enye yobukhulu besikrini usebenzisa ubuncinci kunye nobubanzi bendawo yokuqhawuka.

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

Umzekelo, @include media-breakpoint-only(md) { ... }isiphumo siya kuba ngu:

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

Phakathi kwee-breakpoints

Ngokufanayo, imibuzo yemithombo yeendaba inokufikelela kububanzi bendawo yokuphumla:

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

eziphumela kwi:

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