Ibice

Gutandukana ni ubugari bwihariye bugena uburyo imiterere yawe yitwaye yitwara mugikoresho cyangwa ingano yo kureba muri Bootstrap.

Kuriyi page

Ibyingenzi

Ibice byacitse nibyo byubaka byubushakashatsi. Koresha kugirango ugenzure mugihe imiterere yawe ishobora guhuzwa kumurongo runaka cyangwa ubunini bwibikoresho.
Koresha ibibazo byitangazamakuru kugirango wubake CSS yawe. Ibibazo byitangazamakuru nibiranga CSS igufasha gukoresha uburyo bushingiye kumurongo wa mushakisha hamwe na sisitemu y'imikorere. Dukunze gukoresha min-widthmubibazo byitangazamakuru.
Terefone ubanza, igishushanyo mbonera ni intego. CSS ya Bootstrap igamije gushyira mubikorwa byibuze byuburyo bwo gukora imiterere kugirango ikore imiterere kumurongo muto, hanyuma ibice byuburyo kugirango uhindure igishushanyo cyibikoresho binini. Ibi bitezimbere CSS yawe, itezimbere igihe cyo gutanga, kandi itanga uburambe bukomeye kubasuye.

Bihari

Bootstrap ikubiyemo ibintu bitandatu bitandukanijwe, rimwe na rimwe byitwa grid tiers , kugirango byubake. Ibi bice bishobora gutegurwa niba ukoresha inkomoko ya dosiye ya Sass.

Gutandukana	Icyiciro infix	Ibipimo
X-Ntoya	Nta na kimwe	<576px
Ntoya	`sm`	≥576px
Hagati	`md`	68768px
Kinini	`lg`	≥992px
Kinini cyane	`xl`	001200px
Ikirenga kinini	`xxl`	001400px

Buri cyerekezo cyatoranijwe kugirango gifate neza kontineri ubugari bwikubye inshuro 12. Ibice byacitse nabyo byerekana igice cyibipimo byibikoresho bisanzwe hamwe nubunini bwo kureba - ntabwo byibanda kubintu byose byakoreshejwe. Ahubwo, urutonde rutanga urufatiro rukomeye kandi ruhoraho rwo kubaka kubikoresho byose.

Ibi bice birashobora guhindurwa ukoresheje Sass - uzabisanga ku ikarita ya Sass mu rupapuro rwacu _variables.scss.

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

Kubindi bisobanuro hamwe ningero zuburyo bwo guhindura amakarita yacu ya Sass nibihinduka, nyamuneka reba igice cya Sass cya Grid inyandiko .

Ibibazo by'itangazamakuru

Kubera ko Bootstrap yatejwe imbere kugirango igendanwa mbere, dukoresha urutonde rwibibazo byinshi byitangazamakuru kugirango dushyireho ibintu byumvikana kumiterere yacu. Ibi bice ahanini bishingiye kubugari buke bwo kureba no kutwemerera gupima ibintu uko ibintu bihinduka.

Ubugari

Bootstrap ikoresha cyane cyane itangazamakuru ryibibazo bikurikira - cyangwa aho bihurira - mumasoko yacu ya Sass dosiye kumiterere yacu, sisitemu ya gride, nibigize.

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

Ivanga rya Sass risobanura muri CSS twakusanyije dukoresheje indangagaciro zatangajwe mubihinduka bya Sass. Urugero:

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

Ubugari

Rimwe na rimwe dukoresha ibibazo by'itangazamakuru bijya mu kindi cyerekezo (ingano ya ecran yatanzwe cyangwa ntoya ):

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

Ivanga rifata ibyo byatangajwe, kubikuramo .02px, no kubikoresha max-widthnkindangagaciro. Urugero:

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

Kuki gukuramo .02px? Mucukumbuzi ntabwo ishigikira urutonde rwibibazo , bityo dukora hafi yimipaka ya prefixes min-hamwemax- na viewports hamwe nubugari bwibice (bishobora kugaragara mubihe bimwe na bimwe kubikoresho byo hejuru-dpi, urugero) dukoresheje indangagaciro zifite ubusobanuro buhanitse.

Inzira imwe

Hariho kandi ibibazo byitangazamakuru hamwe nuruvange rwo kwerekana igice kimwe cyubunini bwa ecran ukoresheje ubugari ntarengwa kandi ntarengwa.

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

Kurugero ibisubizo @include media-breakpoint-only(md) { ... }bizavamo:

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

Hagati yo gutandukana

Mu buryo nk'ubwo, ibibazo by'itangazamakuru bishobora kumara ubugari butandukanye:

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

Ibisubizo muri:

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