Swivandla swo wisa

Miehleketo ya nkoka

• Breakpoints i swiaki swa dizayini leyi hlamulaka. Ti tirhise ku lawula loko layout ya wena yi nga cinciwa eka viewport yo karhi kumbe sayizi ya xitirhisiwa.

• Tirhisa swivutiso swa midiya ku architect CSS ya wena hi breakpoint. Swivutiso swa midiya i xivumbeko xa CSS lexi ku pfumelelaka ku tirhisa switayele hi xiyimo leswi simekiweke eka sete ya tipharamitha ta browser na sisiteme yo tirha. Hi tala ku tirhisa min-widtheka swivutiso swa hina swa vuhangalasi bya mahungu.

• Mobile ro sungula, ku hlamula dizayini i pakani. CSS ya Bootstrap yi kongomisa ku tirhisa bare minimum ya switayele ku endla leswaku layout yi tirha eka breakpoint leyitsongo swinene, ivi yi layers eka switayele ku lulamisa dizayini yoleyo eka switirhisiwa leswikulu. Leswi swi antswisa CSS ya wena, swi antswisa nkarhi wo hundzuluxela, naswona swi nyika ntokoto lowunene eka vaendzi va wena.

Swivandla swo wisa leswi kumekaka

Bootstrap yi katsa ti breakpoint ta tsevu ta ntolovelo, leti minkarhi yin’wana ti vuriwaka ti- grid tiers , to aka hi ku hlamula. Swiphemu leswi swi nga endliwa hi ku landza swilaveko swa wena loko u tirhisa tifayela ta hina ta xihlovo xa Sass.

Ndhawu yin’wana ni yin’wana yo tshoveka yi hlawuriwile leswaku yi khoma hi ku ntshunxeka swikhomela-ndhawu leswi ku anama ka swona ku nga ku phindha-phindha ka 12. Tindhawu to tshoveka ti tlhela ti yimela ntlawa lowutsongo wa vukulu bya xitirhisiwa lebyi tolovelekeke ni swipimelo swa xivono—a ti kongomisi hi ku kongoma xiyimo xin’wana ni xin’wana xa matirhiselo kumbe xitirhisiwa. Ematshan’weni ya sweswo, ti- range ti nyika masungulo lama tiyeke ni lama nga cincekiki yo aka eka wona eka kwalomu ka xitirhisiwa xin’wana ni xin’wana.

Swiphemu leswi swi nga cinciwa hi ku tirhisa Sass—u ta swi kuma eka mepe wa Sass eka phepha ra hina ra _variables.scssxitayili.

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

Ku kuma vuxokoxoko byo tala na swikombiso swa ndlela yo cinca mimepe ya hina ya Sass na swilo leswi cinca-cincaka, hi kombela u languta eka xiyenge xa ​​Sass xa matsalwa ya Gridi .

Swivutiso swa vuhangalasi bya mahungu

Tanihi leswi Bootstrap yi tumbuluxiweke ku va mobile ro sungula, hi tirhisa swivutiso swi nga ri swingani swa midiya ku tumbuluxa tindhawu to wisa leti twisisekaka eka swivumbeko swa hina na swihlanganisi. Swiphemu leswi swi seketeriwa ngopfu eka ku anama ka xivono xa le hansi naswona swi hi pfumelela ku ringanisa swiaki loko xivono xi cinca.

Min-ku anama

Bootstrap ngopfu-ngopfu yi tirhisa swiyenge leswi landzelaka swa swivutiso swa midiya—kumbe tindhawu to wisa—eka tifayela ta hina ta xihlovo xa Sass eka layout ya hina, sisiteme ya gridi, na swiphemu.

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

Ti mixins leti ta Sass ti hundzuluxela eka CSS ya hina leyi hlengeletiweke hi ku tirhisa mimpimo leyi tivisiweke eka swilo swa hina leswi cinca-cincaka swa Sass. Xikombiso:

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

Minkarhi yin’wana hi tirhisa swivutiso swa swihangalasamahungu leswi yaka eka tlhelo rin’wana (sayizi ya xikirini leyi nyikiweke kumbe leyitsongo ):

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

Ti mixins leti ti teka ti breakpoints toleto leti tivisiweke, ti susa .02pxeka tona, ti ti tirhisa tani hi max-widthmimpimo ya hina. Xikombiso:

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

Xiphemu xin’we xo tshoveka

Ku tlhela ku va na swivutiso swa vuhangalasi bya mahungu na ti-mixin to kongomisa eka xiphemu xin’we xa vukulu bya xikirini hi ku tirhisa ku anama ka le hansi na lokukulu ka 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) { ... }

Xikombiso the @include media-breakpoint-only(md) { ... }will yi endla leswaku : .

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

Exikarhi ka tindhawu to wisa

Hilaha ku fanaka, swivutiso swa midiya swi nga ha hlanganisa ku anama ko tala ka breakpoint:

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

Leswi endlaka leswaku:

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