Gbeɖekawo

Nukpɔsusu veviwo

• Breakpoints nye xɔtunu siwo wotsɔ wɔa aɖaŋu si wɔa dɔ nyuie. Zã wo nàtsɔ akpɔ ɣeyiɣi si nàte ŋu atrɔ asi le wò ɖoɖoa ŋu le nukpɔkpɔ alo mɔ̃ ƒe lolome aɖe koŋ dzi.

• Zã media biabiawo nàtsɔ awɔ wò CSS la to breakpoint dzi. Media biabia nye CSS ƒe akpa aɖe si na nète ŋu zãa atsyã siwo wotu ɖe web-browser kple dɔwɔɖoɖo ƒe nɔnɔmewo ƒe hatsotso aɖe dzi le nɔnɔme aɖe me. Míezãnɛ wu min-widthle míaƒe nyadzɔdzɔgblɔmɔnuwo me nyabiasewo me.

• Asitelefon gbãtɔ, ɖoɖowɔwɔ si ɖoa nya ŋue nye taɖodzinua. Bootstrap ƒe CSS ƒe taɖodzinue nye be yeawɔ atsyã suetɔ kekeake ŋudɔ atsɔ ana ɖoɖo aɖe nawɔ dɔ le gbagbãƒe suetɔ kekeake, eye emegbe yeatsɔe aɖo atsyãwo dzi atsɔ atrɔ asi le nɔnɔme ma ŋu na mɔ̃ gãwo. Esia na wò CSS la nyona ɖe edzi, enaa gbegɔmeɖeɖe ƒe ɣeyiɣi nyona ɖe edzi, eye wònaa nuteƒekpɔkpɔ nyui aɖe wò amedzrowo.

Gbeɖekaƒe siwo li

Bootstrap ƒe akpa ade default breakpoints, si woyɔna ɣeaɖewoɣi be grid tiers , hena xɔtutu le ŋuɖoɖo me. Woateŋu atrɔ asi le breakpoints siawo ŋu ne èle míaƒe source Sass files zãm.

Wotia gbagbãƒe ɖesiaɖe be wòalé nugoe siwo ƒe kekeme nye zi gbɔ zi 12 la ɖe te bɔbɔe.Tɔtrɔ ƒe teƒewo hã nye mɔ̃ ƒe lolome kple nukpɔkpɔ ƒe didime siwo bɔ ƒe hatsotso sue aɖe teƒenɔla—womeɖoa taɖodzinu alo mɔ̃ ɖesiaɖe koŋ dzi o. Ke boŋ ʋuƒoawo naa gɔmeɖoanyi sesẽ si nɔa anyi ɖaa si dzi woatu ɖo na mɔ̃ ɖesiaɖe kloe.

Woate ŋu atrɔ asi le breakpoint siawo ŋu to Sass dzi—àkpɔ wo le Sass ƒe anyigbatata dzi le míaƒe _variables.scssatsyãgbalẽa me.

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

Ne èdi nyatakaka bubuwo kple kpɔɖeŋuwo tso alesi míatrɔ asi le míaƒe Sass anyigbatatawo kple tɔtrɔwo ŋu la, taflatse kpɔ Sass ƒe akpa si le Grid nuŋlɔɖiwo me .

Nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo

Esi wònye be wowɔ Bootstrap be wòanye asitelefon gbã ta la, míezãa nyadzɔdzɔgblɔmɔnuwo ƒe nyabiase ʋɛ aɖewo tsɔ wɔa vovototo siwo me susu le na míaƒe ɖoɖowo kple ŋgɔdonyawo. Wotu gbagbãƒe siawo ƒe akpa gãtɔ ɖe nukpɔkpɔ ƒe kekeme suetɔ kekeake dzi eye woɖea mɔ na mí be míadzi nuawo ɖe edzi ne nukpɔkpɔa le tɔtrɔm.

Min-kekeme ƒe didime

Bootstrap koŋ zãa media biabia ƒe didime siwo gbɔna—alo breakpoints—le míaƒe dzɔtsoƒe Sass faɛlwo me na míaƒe ɖoɖo, grid ɖoɖo, kple akpawo.

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

Sass mixin siawo ɖea gbegɔme le míaƒe CSS si woƒo ƒu me to asixɔxɔ siwo woɖe gbeƒãe le míaƒe Sass tɔtrɔwo me zazã me. Le kpɔɖeŋu me:

// 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-kekeme ƒe didime

Míezãa nyadzɔdzɔgblɔmɔnuwo ƒe nyabiase siwo yia mɔ bubu dzi ɣeaɖewoɣi (screen ƒe lolome si wona alo esi le sue wu ):

// 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 siawo xɔa breakpoint mawo siwo woɖe gbeƒãe, ɖea wo ɖa .02pxle wo me, eye wozãa wo abe míaƒe max-widthasixɔxɔwo ene. Le kpɔɖeŋu me:

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

Gbeɖeka ƒe gbagbãƒe

Media biabia kple mixins hã li hena taɖodzinu ɖoɖo ɖe screen ƒe lolome ƒe akpa ɖeka ŋu to breakpoint ƒe kekeme suetɔ kple gãtɔ zazã me.

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

Le kpɔɖeŋu me la, @include media-breakpoint-only(md) { ... }will la ahe vɛ be :

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

Le breakpoints dome

Nenema ke nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo ateŋu akeke ta ɖe breakpoint ƒe kekeme geɖe ŋu:

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

Nusi wɔnɛ be:

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