Qabxiilee boqonnaa

Yaad-rimeewwan ijoo

• Breakpoints ijaarsa dizaayinii deebii kennuudha. Yoom qindaa'inni kee bakka ilaalchaa murtaa'e ykn hammangaa meeshaa irratti madaqfamuu danda'u to'achuuf isaan fayyadami.

• Gaaffiiwwan miidiyaa fayyadamii CSS kee qabxii cabsaatiin ijaaruuf. Gaaffiiwwan miidiyaa amala CSS kan tuuta qajoojiiwwan biraawzarii fi sirna hojii irratti hundaa'uun akkaataa haalaan hojiirra oolchuuf si dandeessisudha. min-widthGaaffii miidiyaa keenya keessatti baay'inaan itti fayyadamna .

• Mobile dura, dizaayiniin deebii kennu galma. CSS'n Bootstrap'n qindaa'ina tokko bakka cabbii xiqqaa irratti akka hojjetu gochuuf akkaataa xiqqaa qullaa hojiirra oolchuuf kaayyeffateera, sana booda akkaataawwan irratti laayiyeroota dizaayinii sana meeshaalee gurguddoof sirreessuuf. Kunis CSS kee fooyyessa, yeroo agarsiisaa fooyyessa, daawwattoota keetiif muuxannoo guddaa kenna.

Qabxiilee cabbii jiran

Bootstrap qabxiiwwan cabsuu durtii ja'a of keessatti qabata, yeroo tokko tokko sadarkaa tarjaa jedhamuun waamamu , deebii kennuudhaan ijaaruuf. Qabxiileen cabsuu kun yoo faayiloota madda Sass keenya fayyadamaa jirtan dhuunfachuu dandeessu.

Tokkoon tokkoon qabxii ciccitaa qabduu bal'inni isaanii dachaa 12 ta'e mijataa ta'een qabachuuf filatame.Qabxiin ciccitaa akkasumas bakka bu'oota tuuta xiqqaa hammangaa meeshaa waliigalaa fi safara iddoo ilaalchaa ti-isaan addatti haala itti fayyadama ykn meeshaa hunda irratti hin xiyyeeffatan. Inumaayyuu, ranges meeshaa kamiifuu jechuun ni danda'ama irratti ijaaruuf bu'uura cimaa fi walsimaa ta'e ni kennu.

Qabxiileen cabbii kun karaa Sass dhuunfamuu danda'u-kaartaa Sass keessatti _variables.scssakkaataa keenya keessatti ni argattu.

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

Odeeffannoo dabalataa fi fakkeenyota akkaataa kaartaa fi jijjiiramoota Sass keenya fooyyessuuf, maaloo kutaa Sass galmee Giriidi ilaali .

Gaaffii miidiyaa

Bootstrap jalqaba mobaayila akka ta'uuf waan hojjetameef, gaaffiiwwan miidiyaa muraasa fayyadamnee haalawwanii fi walqunnamsiistota keenyaaf qabxiiwwan ciccituu hubannoo qaban uumna. Qabxiileen cabbii kun irra caalaa bal'ina agarsiisaa xiqqaa irratti kan hundaa'an yoo ta'u, akkuma mul'ataan jijjiiramutti elementoota akka guddifnu nu dandeessisu.

Min-bal’ina

Bootstrap adda durummaan hangawwan gaaffii miidiyaa armaan gadii fayyadama—ykn qabxiilee cabsuu—faayiloota Sass madda keenya keessatti haalata, sirna tarjaa, fi qaamolee keenyaaf.

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

Miksiin Sass kun gatiiwwan jijjiiramoota Sass keenya keessatti labsaman fayyadamuun CSS keenya qindaa'e keessatti hiiku. Fakkeenyaaf:

// 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-bal’ina

Gaaffiiwwan miidiyaa kallattii biraatiin deeman darbee darbee fayyadamna (hamma iskiriinii kenname ykn isaa xiqqaa ):

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

Miksiin kunniin qabxiilee cabsuu labsaman sana fudhatu, irraa hir'isuun , akka gatii .02pxkeenyaatti fayyadamu . max-widthFakkeenyaaf:

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

Qabxii cabsuu tokko

Akkasumas, bal'ina qabxii cabbii xiqqaa fi guddaa fayyadamuun kutaa tokko hammangaa iskiriinii irratti xiyyeeffachuuf gaaffiiwwan miidiyaa fi makaawwan jiru.

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

Fakkeenyaaf @include media-breakpoint-only(md) { ... }will bu'aan isaa : .

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

Qabxii cabbii gidduutti

Haaluma walfakkaatuun, gaaffiiwwan miidiyaa bal'ina tuqaa cabbii dachaa dabarsuu danda'u:

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

Kan bu’aan isaas:

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